我正在构建一个卡路里计算器,遇到了一些问题。我想根据某些饮食进行过滤。不符合描述的元素将灰显,并且无法单击。在桌面上一切正常,但这些在移动设备上都没有生效。我不知道为什么,我尝试使用不透明度,淡出和css设置,但似乎没有任何方法。
这是JS:
$(document).ready(function (){
// Dropdown menu icon animation up/down toggle.
$('.dropbtn').on('click', function() {
$('#myDropdown').slideToggle();
$(this).find('i').toggleClass('fa-sort-up fa-sort-down')
});
$(".soups, .desserts, .teas").hide();
// Hover animation ITT FOLYTASD
$("#maindish, #soups, #desserts, #teas").hover(function() {
$(this).fadeTo("slow", 1);
$(this).css('visibility', 'visible')
}, function() {
$(this).fadeTo("slow", 0.5);
$(this).css('visibility', 'visible');
});
//Main dish
$("#maindish").click(function() {
var visibility = $("#maindish").is(":visible");
if (visibility) {
console.log("not visible");
} else {
console.log("visible");
}
//$(".soup, .desserts, .teas").hide();
$(".maindish").slideToggle("fast");
$("#maindish").toggleClass("visible");
$(".soups, .desserts, .teas").slideUp();
$("#soups, #desserts, #teas").removeClass("visible");
});
//soup
$("#soups").click(function() {
var visibility = $("#soups").is(":visible");
if (visibility) {
console.log("not visible");
} else {
console.log("visible");
}
$(".maindish, .desserts, .teas").slideUp();
$(".soups").slideToggle("fast");
$("#soups").toggleClass("visible");
$("#maindish, #desserts, #teas").removeClass("visible");
});
//teas
$("#teas").click(function() {
var visibility = $("#teas").is(":visible");
if (visibility) {
console.log("not visible");
} else {
console.log("visible");
}
$(".maindish, .desserts, .soups").slideUp();
$(".teas").slideToggle("fast");
$("#teas").toggleClass("visible");
$("#maindish, #desserts, #soups").removeClass("visible");
});
//desszerts
$("#desserts").click(function() {
var visibility = $("#desserts").is(":visible");
if (visibility) {
console.log("not visible");
} else {
console.log("visible");
}
$(".maindish, .teas, .soups").slideUp();
$(".desserts").slideToggle("fast");
$("#desserts").toggleClass("visible");
$("#maindish, #teas, #soups").removeClass("visible");
});
$(document).ready(function() {
$(".ingredients i").click(function() {
var calories = $(this).parent().data("calories");
var carbs = $(this).parent().data("carbs");
var fat = $(this).parent().data("fat");
var proteins = $(this).parent().data("proteins");
var totalNum = $("#total");
var totalCarbs = $("#totalCarbs");
var totalFats = $("#totalFats");
var totalProteins = $("#totalProteins");
var currentCalories = +totalNum.html();
var currentCarbs = +totalCarbs.html();
var currentFats = +totalFats.html();
var currentProteins = +totalProteins.html();
var pressed = $(this).hasClass("clicked");
if (isNaN(currentCalories)) {
currentCalories = 0;
}
if (pressed) {
$(this).removeClass("clicked");
$(this).addClass("fa-plus");
totalNum.text(+(currentCalories - calories).toFixed(1));
totalCarbs.text(+(currentCarbs - carbs).toFixed(1));
totalFats.text(+(currentFats - fat).toFixed(1));
totalProteins.text(+(currentProteins - proteins).toFixed(1));
} else {
$(this).addClass("clicked");
totalNum.text(+(currentCalories + calories).toFixed(1));
totalCarbs.text(+(currentCarbs + carbs).toFixed(1));
totalFats.text(+(currentFats + fat).toFixed(1));
totalProteins.text(+(currentProteins + proteins).toFixed(1));
}
});
});
// plus button hover effect
// $("td i").hover(
// function() {
// $(this).removeClass('fa-plus');
// $(this).addClass('fa-plus-circle');
// },
// function() {
// $(this).removeClass('fa-plus-circle');
// $(this).addClass('fa-plus');
// if ($(this).hasClass("fa-times-circle")) {
// $(this).removeClass('fa-plus');
// }
// });
// plus button click effect
$("td i").click(function() {
$(this).removeClass('fa-plus');
$(this).removeClass('fa-plus-circle');
$(this).toggleClass("fa-times-circle");
});
$(".fa-times-circle").click(function() {
$(this).removeClass('fa-plus-circle');
$(this).addClass('fa-plus');
});
// Filters + Description text setup
// Filters + Description text setup
$(document).on('click', '.diet-filter-button', function () {
var map = {
vegan: {
attr: 'vegan',
desc: 'veganDescription'
},
vegeterian: {
attr: 'vegetarian',
desc: 'vegetarianDescription'
},
gluten: {
attr: 'glutenfree',
desc: 'glutenFreeDescription'
},
lactose: {
attr: 'lactoseFree',
desc: 'lactoseFreeDescription'
},
addedSugar: {
attr: 'noAddedSugar',
desc: 'noAddedSugarDescription'
}
},
diet = $(this).data('diet'),
filtered = $(this).hasClass("filtered");
if (filtered) {
$(this).removeClass("filtered");
$(".ingredient:not([" + map[diet]['attr'] + "])").css('visibility', 'visible').fadeTo(1000, 1).css("pointer-events", "auto");
$("#" + map[diet]['desc']).css("opacity", "0");
$(this).css('visibility', 'visible')
} else {
$(this).addClass("filtered");
$(".ingredient:not([" + map[diet]['attr'] + "]").css('visibility', 'visible').fadeTo(1000, 0.5).css("pointer-events", "none").fadeTo("slow", 0.5);;;
$("#" + map[diet]['desc']).fadeTo("slow", 1);;
$(this).css('visibility', 'visible')
}
});
});
和 html:
<div id="VeganNoBaseSauce"></div>
<!-- BASES -->
<div><img class="headingimage" src="http://www.padthai.decorolux.com/wp-content/uploads/2018/03/ikonok-06.png"></div>
<table>
<tr>
<th width="15%">Bases</th>
<th width="20%"></th>
<th width="15%" style="font-weight:normal">Calories</th>
<th width="15%" style="font-weight:normal">Carbs</th>
<th width="15%" style="font-weight:normal">Fat</th>
<th width="15%" style="font-weight:normal">Protein</th>
<th width="5%" style="font-weight:normal">Add</th>
</tr>
<tr vegetarian vegan lactosefree glutenfree soyfree sugarfree noaddedsugar>
<td><img src='http://www.padthai.decorolux.com/wp-content/uploads/2018/03/base_toppings_extra.png'></td>
<td>Rice Noodle</td>
<td>517.2</td>
<td>76.1</td>
<td>14.4</td>
<td>20.8</td>
<td class="ingredients" data-calories="517.2" data-carbs="76.1" data-fat="14.4" data-proteins="20.8"><i class="fa fa-plus" style="font-size:20px;"></i></td>
</tr>
<tr class="ingredient" vegetarian lactosefree soyfree sugarfree noaddedsugar>
<td><img src='http://www.padthai.decorolux.com/wp-content/uploads/2018/03/base_toppings_extra2.png'></td>
<td>Egg Noodle</td>
<td>510.5</td>
<td>66.1</td>
<td>14.1</td>
<td>29.8</td>
<td class="ingredients" data-calories="510.5" data-carbs="66.1" data-fat="14.1" data-proteins="29.8"><i class="fa fa-plus" style="font-size:20px;"></i></td>
</tr>
<tr class="ingredient" vegetarian vegan lactosefree glutenfree soyfree sugarfree noaddedsugar>
<td><img src='http://www.padthai.decorolux.com/wp-content/uploads/2018/03/base_toppings_extra3.png'></td>
<td>Vermicelli</td>
<td>506.9</td>
<td>76.9</td>
<td>14.1</td>
<td>18.1</td>
<td class="ingredients" data-calories="506.9" data-carbs="76.9" data-fat="14.1" data-proteins="18.1"><i class="fa fa-plus" style="font-size:20px;"></i></td>
</tr>
<tr class="ingredient" vegetarian vegan lactosefree soyfree sugarfree noaddedsugar>
<td><img src='http://www.padthai.decorolux.com/wp-content/uploads/2018/03/base_toppings_extra4.png'></td>
<td>Whole Grain Noodle</td>
<td>476.6</td>
<td>53.8</td>
<td>16.6</td>
<td>28.0</td>
<td class="ingredients" data-calories="476.6" data-carbs="53.8" data-fat="16.6" data-proteins="28"><i class="fa fa-plus" style="font-size:20px;"></i></td>
</tr>
<tr class="ingredient" vegetarian vegan glutenfree soyfree sugarfree noaddedsugar>
<td><img src='http://www.padthai.decorolux.com/wp-content/uploads/2018/03/base_toppings_extra5.png'></td>
<td>White Rice</td>
<td>514.8</td>
<td>72.4</td>
<td>14.8</td>
<td>23.0</td>
<td class="ingredients" data-calories="514.8" data-carbs="72.4" data-fat="14.8" data-proteins="23"><i class="fa fa-plus" style="font-size:20px;"></i></td>
</tr>
<tr class="ingredient" vegetarian vegan lactosefree glutenfree soyfree sugarfree noaddedsugar>
<td><img src='http://www.padthai.decorolux.com/wp-content/uploads/2018/03/base_toppings_extra6.png'></td>
<td>Brown Rice</td>
<td>516.0</td>
<td>70.1</td>
<td>16.0</td>
<td>22.9</td>
<td class="ingredients" data-calories="516" data-carbs="70.1" data-fat="16" data-proteins="22.9"><i class="fa fa-plus" style="font-size:20px;"></i></td>
</tr>
<tr class="ingredient" vegetarian vegan lactosefree glutenfree soyfree sugarfree noaddedsugar>
<td><img src='http://www.padthai.decorolux.com/wp-content/uploads/2018/03/base_toppings_extra7.png'></td>
<td>Vegetable Base</td>
<td>106.6</td>
<td>14.2</td>
<td>1.8</td>
<td>8.4</td>
<td class="ingredients" data-calories="106.6" data-carbs="14.2" data-fat="1.8" data-proteins="8.4"><i class="fa fa-plus" style="font-size:20px;"></i></td>
</tr>
</table>
<!-- TOPPINGS -->
<div><img class="headingimage" src="http://www.padthai.decorolux.com/wp-content/uploads/2018/03/ikonok-07.png"></div>
<table>
<tr>
<th class="green" width="15%">Toppings</th>
<th class="green" width="20%"></th>
<th class="green" width="15%" style="font-weight:normal">Calories</th>
<th class="green" width="15%" style="font-weight:normal">Carbs</th>
<th class="green" width="15%" style="font-weight:normal">Fat</th>
<th class="green" width="15%" style="font-weight:normal">Protein</th>
<th class="green" width="5%" style="font-weight:normal">Add</th>
</tr>
<tr class="ingredient" lactosefree glutenfree soyfree sugarfree noaddedsugar>
<td><img src='http://www.padthai.decorolux.com/wp-content/uploads/2018/03/base_toppings_extra8.png'></td>
<td>Chicken</td>
<td>65.9</td>
<td>0.2</td>
<td>14.4</td>
<td>12.9</td>
<td class="ingredients" data-calories="65.9" data-carbs="0.2" data-fat="1.5" data-proteins="12.9"><i class="fa fa-plus" style="font-size:20px;"></i></td>
</tr>
<tr class="ingredient" lactosefree glutenfree soyfree sugarfree noaddedsugar>
<td><img src='http://www.padthai.decorolux.com/wp-content/uploads/2018/03/base_toppings_extra10.png'></td>
<td>Pork</td>
<td>166.4</td>
<td>0.1</td>
<td>14</td>
<td>10</td>
<td class="ingredients" data-calories="166.4" data-carbs="0.1" data-fat="14" data-proteins="10"><i class="fa fa-plus" style="font-size:20px;"></i></td>
</tr>
<tr class="ingredient" vegetarian vegan lactosefree glutenfree sugarfree noaddedsugar>
<td><img src='http://www.padthai.decorolux.com/wp-content/uploads/2018/03/base_toppings_extra9.png'></td>
<td>Smoked Tofu</td>
<td>50.1</td>
<td>0.4</td>
<td>2.9</td>
<td>5.6</td>
<td class="ingredients" data-calories="50.1" data-carbs="0.4" data-fat="2.9" data-proteins="5.6"><i class="fa fa-plus" style="font-size:20px;"></i></td>
</tr>
<tr class="ingredient" lactosefree glutenfree soyfree sugarfree noaddedsugar>
<td><img src='http://www.padthai.decorolux.com/wp-content/uploads/2018/03/base_toppings_extra11.png'></td>
<td>Beef</td>
<td>120.8</td>
<td>0.3</td>
<td>8.4</td>
<td>11.0</td>
<td class="ingredients" data-calories="120.8" data-carbs="0.3" data-fat="8.4" data-proteins="11"><i class="fa fa-plus" style="font-size:20px;"></i></td>
</tr>
<tr class="ingredient" lactosefree glutenfree soyfree sugarfree noaddedsugar>
<td><img src='http://www.padthai.decorolux.com/wp-content/uploads/2018/03/base_toppings_extra12.png'></td>
<td>Duck</td>
<td>111.2</td>
<td>0.2</td>
<td>7.2</td>
<td>11.4</td>
<td class="ingredients" data-calories="111.2" data-carbs="0.2" data-fat="7.2" data-proteins="11.4"><i class="fa fa-plus" style="font-size:20px;"></i></td>
</tr>
<tr class="ingredient" lactosefree glutenfree soyfree sugarfree noaddedsugar>
<td><img src='http://www.padthai.decorolux.com/wp-content/uploads/2018/03/base_toppings_extra13.png'></td>
<td>Prawn</td>
<td>107.5</td>
<td>2.4</td>
<td>1.1</td>
<td>22</td>
<td class="ingredients" data-calories="107.5" data-carbs="2.4" data-fat="1.1" data-proteins="22"><i class="fa fa-plus" style="font-size:20px;"></i></td>
</tr>
</table>
这是一个我正在尝试测试它的实时链接。
https://www.padthaiwokbar.com/Calorie/Hun/
问题是:您在按钮的顶部/z索引上有一些元素,例如带有opacity
和#dietDescriptionTexts
的#vegetarianDescription, #glutenFreeDescription, #noAddedSugarDescription, #lactoseFreeDescription, #veganDescription
..您需要为它们使用display : none;
或在尝试隐藏它们时使用z-index : -1
或max-width :0
你可以看看 https://stackoverflow.com/a/273076/3385827