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

Question

我有一个网页，其中包含一组使用HTML5 5的“数据-”标签标记为元数据的元素。每个元素代表一所学校的特定课程或项目。下面是元素集合的一个示例：

<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>

正如你所看到的，每个元素要么是一门课程(短的单一课程)，要么是一个程序(一种跨越数年的完整教育)。此外，每个元素都是校园(校园内)或距离(远程学习)。

在此页面的界面中，用户有四个按钮，它们可以是on/true，也可以是off/false。这四个按钮是：

课程课程校园距离

当页面加载时，所有四个按钮都是on/true，因为该页显示了校园和远程学习中的所有课程和程序。

当用户单击其中一个按钮时，我希望使用jQuery隐藏所有不再符合条件的元素；换句话说:筛选器。

起初，这似乎是一项简单的任务。只需写一些大意如下的东西：

$("#courseButton").toggle(function(){
   $("courseBox[data-type='course']").hide();
},
function(){
   $("courseBox[data-type='course']").show();
});

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

用户首先单击“课程”按钮，即隐藏所有课程的“距离”按钮( "courses").

• Then单击隐藏标记为"distance".

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

我现在的问题是：如何使用jQuery创建一个过滤器函数，即使有两种不同的(交叉)方法来对元素进行分类？

提前感谢！

/Thomas卡恩

Answer 1

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

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

下面是一个示例：

$(".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();
    });
});

http://jsfiddle.net/jtbowden/qjpctye4/

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

​

$(".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 {
  border: 1px solid black;
  padding: 2px;
  margin: 4px;
  float: left;
  cursor: default;
}
.courseBox {
  clear: both;
  background-color: lightBlue;
  margin: 3px;
}
.selected {
  background-color: lightGreen;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="button selected datatype" id="courseButton">Courses</div>
<div class="button selected datatype" id="programButton">Programs</div>
<div class="button selected datalocation" id="distanceButton">Distance</div>
<div class="button selected datalocation" id="campusButton">Campus</div>

<div class="courseBox" data-type="course" data-location="campus">Course Campus</div>

<div class="courseBox" data-type="program" data-location="campus">Program Campus</div>

<div class="courseBox" data-type="course" data-location="distance">Course Distance</div>

<div class="courseBox" data-type="program" data-location="distance">Program Distance</div>

​

Answer 2

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

这样的东西：

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();

Answer 3

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

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();' />