当有两个相交的原则控制元素是否可见时，如何使用jQuery显示/隐藏元素？

我有一个网页，其中包含一组元素，这些元素使用HTML5的“data-”标记进行元数据标记。每个元素代表一所学校的特定课程或计划。以下是元素集的外观示例：

<div class="courseBox" data-type="course" data-location="campus">info about this particular course</div>

<div class="courseBox" data-type="program" data-location="campus">info about this particular course</div>

<div class="courseBox" data-type="course" data-location="distance">info about this particular course</div>

<div class="courseBox" data-type="program" data-location="distance">info about this particular course</div>

只要两种不同的元素分类方法不发生冲突，这种方法就可以正常工作。但是考虑一下这个例子：

用户首先单击“课程” 按钮，隐藏所有课程 （标有“课程”）

然后单击“距离”按钮 它隐藏所有标记的元素 “距离”

然后用户单击“课程” 再次单击按钮，它将显示所有 标有“课程”的元素，包括 标记为“距离”的， 尽管事实上他们是 应该是隐藏的

我现在的问题是：如何使用jQuery创建一个过滤函数，即使有两种不同的（交叉）方式对元素进行分类，它也能正常工作？

提前谢谢

---

/Thomas Kahn每次都基于所有四个输入构建一个完整的选择器

类似这样的内容：

var selector = '';
$('input:checkbox').each(function(){
    if (this.checked){
        selector += '[data-type="' + this.id +'"], '; // assuming checkbox.id =  Course|Program|Campus|Distance
    }
});

selector = selector.substring(0, selector.length-1); // kill trailing ' ,'

var all = $('.courseBox'),
    toShow = all.filter(selector),
    toHide = all.not(toShow);

toShow.show();
toHide.hide();

---

每次基于所有四个输入构建一个完整的选择器

类似这样的内容：

var selector = '';
$('input:checkbox').each(function(){
    if (this.checked){
        selector += '[data-type="' + this.id +'"], '; // assuming checkbox.id =  Course|Program|Campus|Distance
    }
});

selector = selector.substring(0, selector.length-1); // kill trailing ' ,'

var all = $('.courseBox'),
    toShow = all.filter(selector),
    toHide = all.not(toShow);

toShow.show();
toHide.hide();

---

我认为使用控制器将是最好的解决方案，它保持显示和隐藏对象的业务逻辑。然后，只需使用此控制器的方法切换模型状态，并始终调用相同的方法来更新元素的可见性。 以下是可能的解决方案：

var someController = (function(){
    var model = {
        showCourse: true,
        showProgram: true,
        showCampus:true,
        showDistance: true
    }

    var _UpdateView = function(){
        $(".courseBox[data-type='course']").filter(".courseBox[data-location='campus']").toggle(model.showCourse && model.showCampus);
        $(".courseBox[data-type='program']").filter(".courseBox[data-location='campus']").toggle(model.showProgram && model.showCampus);
        $(".courseBox[data-type='course']").filter(".courseBox[data-location='distance']").toggle(model.showCourse && model.showDistance);
        $(".courseBox[data-type='program']").filter(".courseBox[data-location='distance']").toggle(model.showProgram && model.showDistance);
    };

    var _toggleCourse = function(){
        model.showCourse = !model.showCourse;
        _UpdateView();
    };

    var _toggleProgram = function(){
        model.showProgram = !model.showProgram;
        _UpdateView();
    };

    var _toggleCampus = function(){
        model.showCampus = !model.showCampus;
        _UpdateView();
    };

    var _toggleDistance = function(){
        model.showDistance = !model.showDistance;
        _UpdateView();
    };


    return {
        toggleCourse: function(){_toggleCourse();},
        toggleProgram: function(){_toggleProgram();},
        toggleCampus: function(){_toggleCampus();},
        toggleDistance: function(){_toggleDistance();}
    }
})();

然后在页面上可以使用如下按钮：

<input type='button' value='Course' onclick='someController.toggleCourse();' />
<input type='button' value='Program' onclick='someController.toggleProgram();' />
<input type='button' value='Campus' onclick='someController.toggleCampus();' />
<input type='button' value='Distance' onclick='someController.toggleDistance();' />

---

我认为使用控制器是最好的解决方案，它保持了显示和隐藏对象的业务逻辑。然后，只需使用此控制器的方法切换模型状态，并始终调用相同的方法来更新元素的可见性。 以下是可能的解决方案：

var someController = (function(){
    var model = {
        showCourse: true,
        showProgram: true,
        showCampus:true,
        showDistance: true
    }

    var _UpdateView = function(){
        $(".courseBox[data-type='course']").filter(".courseBox[data-location='campus']").toggle(model.showCourse && model.showCampus);
        $(".courseBox[data-type='program']").filter(".courseBox[data-location='campus']").toggle(model.showProgram && model.showCampus);
        $(".courseBox[data-type='course']").filter(".courseBox[data-location='distance']").toggle(model.showCourse && model.showDistance);
        $(".courseBox[data-type='program']").filter(".courseBox[data-location='distance']").toggle(model.showProgram && model.showDistance);
    };

    var _toggleCourse = function(){
        model.showCourse = !model.showCourse;
        _UpdateView();
    };

    var _toggleProgram = function(){
        model.showProgram = !model.showProgram;
        _UpdateView();
    };

    var _toggleCampus = function(){
        model.showCampus = !model.showCampus;
        _UpdateView();
    };

    var _toggleDistance = function(){
        model.showDistance = !model.showDistance;
        _UpdateView();
    };


    return {
        toggleCourse: function(){_toggleCourse();},
        toggleProgram: function(){_toggleProgram();},
        toggleCampus: function(){_toggleCampus();},
        toggleDistance: function(){_toggleDistance();}
    }
})();

然后在页面上可以使用如下按钮：

<input type='button' value='Course' onclick='someController.toggleCourse();' />
<input type='button' value='Program' onclick='someController.toggleProgram();' />
<input type='button' value='Campus' onclick='someController.toggleCampus();' />
<input type='button' value='Distance' onclick='someController.toggleDistance();' />

---

事实上，你的处境有点棘手。您有两个组，类型和位置。您需要类型和位置的交集

这意味着选择所选类型的所有项目，然后过滤掉所有不属于所选距离的项目，反之亦然

以下是一个例子：

$(".button").click(function() {
    $(this).toggleClass('selected');

    $(".courseBox").hide();

    var datatypes = $(".courseBox");

    $(".button.datatype").not('.selected').each(function() {
        var selClass = $(this).attr('id').replace('Button', '');

        datatypes = datatypes.filter(".courseBox[data-type!='" + selClass + "']");
    });

    $(".button.selected.datalocation").each(function() {
        var selClass = $(this).attr('id').replace('Button', '');

        datatypes.filter(".courseBox[data-location='" + selClass + "']").show();
    });
});

实际上，我从所有项目开始，删除任何未选定类型的项目，然后仅显示选定距离的项目

$（“.button”）。单击（函数（）{
$（this.toggleClass（'selected'）；
$（“.courseBox”）.hide（）；
var数据类型=$（“.courseBox”）；
$（“.button.datatype”）。不是（“.selected”）。每个（函数（）{
var selClass=$（this.attr（'id'）.replace（'Button'，''）；
datatypes=datatypes.filter（“.courseBox[data type！=”“+selClass+”]）；
});
$（“.button.selected.datalocation”）.each（函数（）{
var selClass=$（this.attr（'id'）.replace（'Button'，''）；
datatypes.filter（“.courseBox[data location='”+selClass+']”）.show（）；
});
});
。按钮{
边框：1px纯黑；
填充：2px；
保证金：4倍；
浮动：左；
游标：默认值；
}
.教材盒{
明确：两者皆有；
背景颜色：浅蓝色；
保证金：3倍；
}
.选定{
背景颜色：浅绿色；
}

课程
程序
距离
校园
课程校园
项目校园
航程
节目距离实际上，你的情况有点棘手。您有两个组，类型和位置。您需要类型和位置的交集

这意味着选择所选类型的所有项目，然后过滤掉所有不属于所选距离的项目，反之亦然

以下是一个例子：

$(".button").click(function() {
    $(this).toggleClass('selected');

    $(".courseBox").hide();

    var datatypes = $(".courseBox");

    $(".button.datatype").not('.selected').each(function() {
        var selClass = $(this).attr('id').replace('Button', '');

        datatypes = datatypes.filter(".courseBox[data-type!='" + selClass + "']");
    });

    $(".button.selected.datalocation").each(function() {
        var selClass = $(this).attr('id').replace('Button', '');

        datatypes.filter(".courseBox[data-location='" + selClass + "']").show();
    });
});


实际上，我从所有项目开始，删除任何未选定类型的项目，然后仅显示选定距离的项目


$（“.button”）。单击（函数（）{
$（this.toggleClass（'selected'）；
$（“.courseBox”）.hide（）；
var数据类型=$（“.courseBox”）；
$（“.button.datatype”）。不是（“.selected”）。每个（函数（）{
var selClass=$（this.attr（'id'）.replace（'Button'，''）；
datatypes=datatypes.filter（“.courseBox[data type！=”“+selClass+”]）；
});
$（“.button.selected.datalocation”）.each（函数（）{
var selClass=$（this.attr（'id'）.replace（'Button'，''）；
datatypes.filter（“.courseBox[data location='”+selClass+']”）.show（）；
});
});
。按钮{
边框：1px纯黑；
填充：2px；
保证金：4倍；
浮动：左；
游标：默认值；
}
.教材盒{
明确：两者皆有；
背景颜色：浅蓝色；
保证金：3倍；
}
.选定{
背景颜色：浅绿色；
}

课程
程序
距离
校园
课程校园
项目校园
航程
程序距离
问题在于他同时拥有数据类型和数据距离。每个都必须独立处理。由于它们在本质上是交叉的，[data type=“course”]，[data location=“distance”]仍将为您提供所有“计划”项目（即“距离”）和所有“校园”项目（即“课程”）。问题是，他同时拥有数据类型和数据距离。每个都必须独立处理。由于它们在本质上是交叉的，[data type=“course”]，[data location=“distance”]仍将为您提供所有“计划”项目（距离）和所有“校园”项目（课程）。非常感谢！非常感谢您抽出时间编写了一个工作示例，我可以对其进行测试和解构，以了解其工作原理！非常感谢杰夫！非常感谢您抽出时间编写了一个工作示例，我可以对其进行测试和解构，以了解其工作原理！