Question

由于无法确定如何应用||，因此我陷入了条件jQuery中和&&在这种情况下，或者可能需要添加其他内容。

场景：
通过选择第一个（源）和第二个（目标）某些div元素，将显示两个具有相同选项的下拉菜单。下拉菜单1：苹果，橙子，香蕉下拉菜单2：苹果，橙子，香蕉

当您选择下拉列表1苹果和下拉列表2香蕉时，应该显示与下拉列表1香蕉和下拉列表2苹果不同的元素。这是一个简化的场景，我的真实场景在两侧都有40个下拉选项。

我开始做什么：

    $("#div-1, #div-2").hide();
    $("select[name=fruit-1],select[name=fruit-2]").change(function () {
        if ($("select[name=fruit-1]").val() == "Apple"||$("select[name=fruit-2]").val() == "Banana"||$("select[name=fruit-2]").val() == "Orange") {
                $("#div-1").show();
        }
    });
    $("select[name=fruit-1],select[name=fruit-2]").change(function () {
        if ($("select[name=fruit-2]").val() == "Apple"||$("select[name=fruit-1]").val() == "Banana"||$("select[name=fruit-1]").val() == "Orange") {
                $("#div-2").show();
        }
    });

由于上面的OR运算符，它现在与所有选项组合在一起。当然，我可以使用AND运算符单独解决此问题，但是我有40x40的选项，因此我需要分组。

我如何将它们分开以免它们合并在一起？

Answer 1

我将在这里使用逻辑数组，就像您要显示的元素可以是任何东西，以及逻辑组合可以是任何东西一样，

// find elements
var logic = [
   { fruit1: 'apple', fruit2: 'banana', element: '#div-1' },
   { fruit1: 'banana', fruit2: 'apple', element: '#div-2' }
];

$('.showableDiv').hide();

// Add class of fruit-dropdown to selects, just to make this a little easier to read.
$(".fruit-dropdown").on("change", function () {
    // Hide all other divs? Best to add a class on them, i.e. the div-1 and div-2 classes.
    $('.showableDiv').hide();

    var logicResult = logic.filter(a => a.fruit1 == $("select[name=fruit-1]").val() && a.fruit2 == $("select[name=fruit-2]").val());

    if(logicResult.length) $(logicResult[0].element).show();
});

jsFiddle示例：https://jsfiddle.net/xpvt214o/650234/

orrr ...

// find elements
var logic = [
    { fruit1: 'apple', fruit2: 'banana', element: '#div-1', reverseElement: '#div-2' }
];

$('.showableDiv').hide();

// Add class of fruit-dropdown to selects, just to make this a little easier to read.
$(".fruit-dropdown").on("change", function () {
    // Hide all other divs? Best to add a class on them, i.e. the div-1 and div-2 classes.
    $('.showableDiv').hide();

    var logicResult = logic.filter(a => a.fruit1 == $("select[name=fruit-1]").val() && a.fruit2 == $("select[name=fruit-2]").val());

    if(logicResult.length) { 
      $(logicResult[0].element).show();
    } else {
        logicResult = logic.filter(a => a.fruit1 == $("select[name=fruit-2]").val() && a.fruit2 == $("select[name=fruit-1]").val());
       if(logicResult.length) $(logicResult[0].reverseElement).show();
    }
});

jQuery 2下拉列表相等值不同的结果

1 个答案: