jquery - 使用代表每个类的复选框切换具有多个类的多个部门的可见性

Question

我是第一次在这里发帖，我不是太有经验......

有很多类似的问题询问如何根据复选框选择器显示/隐藏 div；让我感到困惑的是，我有多个类的 div，如果选中了这些类中的任何一个相关复选框，我希望显示 div。

例如，假设我想要一个页面来显示与为一系列 Actor 选择的复选框相对应的所有电影。多个 Actor 可以在一部电影中出现，我希望所有电影都能放映，前提是至少要选择一个 Actor 。到目前为止，我的方法是:

1. 将每部电影放在一个单独的 div 中
2. 将 Actor 姓名作为类添加到每个电影 div
3. 为每个 Actor 创建一个复选框，其值与相应的 div 类相匹配:
4. 设置每个div类不显示
5. 使用 JQuery 显示仍然隐藏的 div

最初我尝试使用 toggle() 来实现这一点，但我遇到了显示问题:如果选择了同一部电影中的两个 Actor ，则状态反转。

接下来我只是尝试编码:

if ($("." + inputValue).is(':hidden')){
$("." + inputValue).show()};

为了克服选中一个复选框然后取消选中它但电影仍然存在的问题，我添加了一个 else 语句来隐藏该元素(如果它已经在显示)..但现在我遇到了与切换时相同的问题()

我添加了下面的代码 - 如果您选择 Brad Pitt 或 Angelina Jolie，您将看到“Mr and Mrs Smith”显示。问题是，如果您随后选择其他男 Actor /女 Actor ，它将再次消失。我可能错了，但似乎更改 div 类的显示属性会更改附加到该 div 的所有其他类的属性(这是有道理的，因为这可以避免冲突)

这里唯一的解决方法是为每部电影设置一个 ID 并检查电影是否已经放映了吗？ (我有很多电影，但 Actor 不多，所以这会导致更多的 CSS 代码)

.BradPitt {
  display: none
}

.AngelinaJolie {
  display: none
  }

<div>
<label><input type="checkbox" name="actorCheckbox" value="BradPitt"> Brad Pitt </label>
<label><input type="checkbox" name="actorCheckbox" value="AngelinaJolie"> Angelina Jolie </label>
</div>

<div class = "BradPitt AngelinaJolie">Mr and Mrs Smith</div>



<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>
<script>
$(document).ready(function(){

  var showElements = function() {

        var inputValue = $(this).attr("value");
        
        if ($("." + inputValue).is(':hidden')){
        $("." + inputValue).show()
      }else{
        $("." + inputValue).hide()
        };


  }

  $( "input[type=checkbox]" ).on( "click", showElements );  
});
</script>

Answer 1

为了让它工作，我建议做一些小的改变:

$(document).ready(function() {
  var showElements = function() {
    var inputValue = []
    $("input[type=checkbox]:checked").each(function() {
      inputValue.push($(this).val())
    })
    $('.movie').hide();
    $('.movie').filter(function() {
      for (var i = 0; i < inputValue.length; i++) {
        if ($(this).hasClass(inputValue[i])) {
          return $(this)
        }
      }
    }).show();
  }
  $("input[type=checkbox]").on("click", showElements);
});

我还添加了类 movie至 <div class = "BradPitt AngelinaJolie">Mr and Mrs Smith</div>

演示

$(document).ready(function() {
  var showElements = function() {
    var inputValue = []
    $("input[type=checkbox]:checked").each(function() {
      inputValue.push($(this).val())
    })
    $('.movie').hide();
    $('.movie').filter(function() {
      for (var i = 0; i < inputValue.length; i++) {
        if ($(this).hasClass(inputValue[i])) {
          return $(this)
        }
      }
    }).show();
  }
  $("input[type=checkbox]").on("click", showElements);
});

.BradPitt {
  display: none
}

.AngelinaJolie {
  display: none
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <label><input type="checkbox" name="actorCheckbox" value="BradPitt"> Brad Pitt </label>
  <label><input type="checkbox" name="actorCheckbox" value="AngelinaJolie"> Angelina Jolie </label>
</div>

<div class="movie BradPitt AngelinaJolie">Mr and Mrs Smith</div>
<div class="movie BradPitt">Troy</div>