Jquery 条件不过滤答案

Question

我正在构建一个带有麸质过滤器的卡路里计算器。我有很多元素，对于某些过滤器，我希望使用不包含特定 class.

的所有项目

但是对于很多物品来说，有时颠倒逻辑会更好，我想将面筋 class 添加到含有面筋的物品中（只有 2 个）。

不过，我的逻辑好像不行。

$ 过滤麸质的代码位于底部附近。

// Dropdown menu icon animation up/down toggle.

$('.dropbtn').on('click', function() {
    $('#myDropdown').slideToggle();
    $(this).find('i').toggleClass('fa-sort-up fa-sort-down')
});


// Dropdown menu up/down toggle. Javítsd ki)


// $(document).mouseup(function(e) {
//     //if you are clicking on the a tags inside #myDropdown stop 
//     //propagation of the event up the DOM (prevent it from getting to 'document')
//     if ($(e.target).is('#myDropdown a')) {
//         e.stopPropagation();
//     } else {
//         $("#myDropdown").slideUp();
//         $('.dropbtn i').addClass('fa-sort-up').removeClass('fa-sort-down')
//     }
// });


// Hide content

$(".maindish, .soups, .desserts, .teas").hide();

// Hover animation ITT FOLYTASD

$("#maindish, #soups, #desserts, #teas").hover(function() {
    $(this).fadeTo("slow", 1);
}, function() {
    $(this).fadeTo("slow", 0.5);
});



//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() {
    $(".ingredient 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");
            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 gomb 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 gomb click effect

$("td i").click(function() {
    $(this).removeClass('fa-plus');
    $(this).removeClass('fa-plus-circle');
    $(this).toggleClass("fa-times-circle");
});


// Vegan Filter + Description text setup

$(document).ready(function() {
    $("#veganDiet").click(function() {
        var filtered = $(this).hasClass("filtered");


        if (filtered) {
            $(this).removeClass("filtered");
            $(".ingredient:not([vegan])").fadeTo(1000, 1);
            $(".ingredient:not([vegan])").css("pointer-events", "auto");
            $("#dietDescription").css("opacity", "0");


        } else {

            $(this).addClass("filtered");
            $(".ingredient:not([vegan])").fadeTo(1000, 0.5);
            $(".ingredient:not([vegan])").css("pointer-events", "none");
            $("#dietDescription").css("opacity", "1");

        }
    });
});

// Vegetarian Filter + Description text setup

$(document).ready(function() {
    $("#vegetarianDietButton").click(function() {
        var filtered = $(this).hasClass("filtered");


        if (filtered) {
            $(this).removeClass("filtered");
            $(".ingredient:not([vegetarian])").fadeTo(1000, 1);
            $(".ingredient:not([vegetarian])").css("pointer-events", "auto");
          $("#vegetarianDescription").css("opacity", "0");


        } else {

            $(this).addClass("filtered");
            $(".ingredient:not([vegetarian])").fadeTo(1000, 0.5);
            $(".ingredient:not([vegetarian])").css("pointer-events", "none");
          $("#vegetarianDescription").css("opacity", "1");

        }
    });
});


GlutenFree Filter + Description text setup

$(document).ready(function() {
    $("#noGlutenButton").click(function() {
        var filtered = $(this).hasClass("filtered");


        if (filtered) {
            $(this).removeClass("filtered");
            $(".ingredient[glutenfree]").fadeTo(1000, 1);
            $(".ingredient[glutenfree]").css("pointer-events", "auto");
          $("#glutenFreeDescription").css("opacity", "0");


        } else {

            $(this).addClass("filtered");
            $(".ingredient[glutenfree]").fadeTo(1000, 0.5);
            $(".ingredient[glutenfree]").css("pointer-events", "none");
          $("#glutenFreeDescription").css("opacity", "1");

        }
    });
});

// LactoseFree Filter + Description text setup

// $(document).ready(function() {
//     $("#vegetarianDietButton").click(function() {
//         var filtered = $(this).hasClass("filtered");


//         if (filtered) {
//             $(this).removeClass("filtered");
//             $(".ingredient:not([vegetarian])").fadeTo(1000, 1);
//             $(".ingredient:not([vegetarian])").css("pointer-events", "auto");
//           $("#vegetarianDescription").css("opacity", "0");


//         } else {

//             $(this).addClass("filtered");
//             $(".ingredient:not([vegetarian])").fadeTo(1000, 0.5);
//             $(".ingredient:not([vegetarian])").css("pointer-events", "none");
//           $("#vegetarianDescription").css("opacity", "1");

//         }
//     });
// });

// NoAddedSugar Filter + Description text setup

// $(document).ready(function() {
//     $("#vegetarianDietButton").click(function() {
//         var filtered = $(this).hasClass("filtered");


//         if (filtered) {
//             $(this).removeClass("filtered");
//             $(".ingredient:not([vegetarian])").fadeTo(1000, 1);
//             $(".ingredient:not([vegetarian])").css("pointer-events", "auto");
//           $("#vegetarianDescription").css("opacity", "0");


//         } else {

//             $(this).addClass("filtered");
//             $(".ingredient:not([vegetarian])").fadeTo(1000, 0.5);
//             $(".ingredient:not([vegetarian])").css("pointer-events", "none");
//           $("#vegetarianDescription").css("opacity", "1");

//         }
//     });
// });

它不会让我在这里粘贴整个代码，所以这里是 link 到 Codepen：https://codepen.io/Pbalazs89/pen/aYJRbe

举个例子，全麦面条含有麸质。如果选择了饮食，它们应该变灰。这在选择纯素饮食时效果很好，但不适用于麸质。

谢谢！

Answer 1

跟踪您的代码也非常困难，因为有很多重复项，但我已经设法让您为饮食提供一个功能，因此您不需要为每种饮食提供所有重复项。

试试下面的代码

在HTML文件中

<div id="myDropdown" class="dropdown-content">
    <a id="veganDiet" class="dropbtn2 diet-filter-button" data-diet="vegan"> Vegan</a>
    <a id="vegetarianDietButton" class="dropbtn2 diet-filter-button" data-diet="vegeterian"> Vegetarian</a>
    <a id="noGlutenButton" class="dropbtn2 diet-filter-button" data-diet="gluten"> Gluten-Free</a>
    <a id="noLactoseButton" class="dropbtn2 diet-filter-button" data-diet="lactose"> Lactose-Free</a>
    <a id="noAddedSugarButton" class="dropbtn2 diet-filter-button" data-diet="addedSugar"> No Added Sugar</a>
</div>

在 javascript 文件中，您可以用这个

替换过滤器的所有函数

$(document).on('click', '.diet-filter-button', function () {
     var map = {
        vegan: {
            attr: 'vegan',
            desc: 'dietDescription'
        },
        vegeterian: {
            attr: 'vegeterian',
            desc: 'vegetarianDescription'
        },
        gluten: {
            attr: 'glutenfree',
            desc: 'glutenFreeDrescription'
        },
        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'] + "])").fadeTo(1000, 1).css("pointer-events", "auto");
        $("#" + map[diet]['desc']).css("opacity", "0");
    } else {
        $(this).addClass("filtered");
        $(".ingredient:not([" + map[diet]['attr'] + "]").fadeTo(1000, 0.5).css("pointer-events", "none");
        $("#" + map[diet]['desc']).css("opacity", "1");
    }
});

我在按钮上添加了 diet-filter-button class，接下来我在 document 上添加了一个事件监听器，用于此 [= 上的所有 click 操作31=]。该事件触发一个函数，该函数将按钮的 data-diet 属性作为标识符，接下来我有一个基于您使用的属性和描述 ID 的 map 变量。现在，对于所有按钮，您只有一个功能可以完成所有工作。

尝试更改 HTML 并注释掉所有用于过滤的函数，并仅放置此 JS 代码，看看它是否有效

Jquery 条件不过滤答案

Jquery conditional not filtering answers

jquery

conditional

filter