Question

我的html看起来像这样。但它在“相关”属性中包含更多的框和更多条目 - 它们是根据后端逻辑从数据库动态加载的。

<div id="container">

    <div id="134" class=box>
        <h3 related="157,202">Title</h3>
        <p>bla bla bla</p>
        <input name="" value="" type="checkbox">
    </div>

    <div id="157" class=box>
        <h3 related="134,202">Title</h3>
        <p>bla bla bla</p>
        <input name="" value="" type="checkbox">
    </div>

    <div id="167" class=box>
        <h3 related="205,210">Title</h3>
        <p>bla bla bla</p>
        <input name="" value="" type="checkbox">
    </div>

    <div id="202" class=box>
        <h3 related="134,157">Title</h3>
        <p>bla bla bla</p>
        <input name="" value="" type="checkbox">
    </div>

</div>

我想要做的是在输入点击其中一个时用相应的方框标记相关的方框。例如，如果我点击＃134输入 - ＃157和＃202框应该得到“相关”类。

我一般都明白需要做什么，但是我在使用数组中的结果将它们与盒子ID进行比较时遇到了麻烦。

到目前为止我所拥有的：

$('.box input').click(function () {
if (this.checked) {

var array = $(this).closest(".box").find("h3").attr('related').split(",");

$.each(array, function (i) {
   console.log(array[i]);
});

} else {

/* do something else */

}

}

谢谢。

Answer 1

我会这样做，所以你也可以在取消选中时删除...

只需创建一个接收相关ID
遍历所有
并为每个选中，找到复选框并标记，选中或不选中

＆＃13;

$('.box input').click(function () {
  var relatedIds = $(this)         // the clicked checkbox
           .closest(".box")        // the wrapper div
           .toggleClass('clicked') // let's add/remove a class
           .find("h3")             // the h3 with the properties
           .attr('related')
           .split(",");
           
  markAllRelated(relatedIds, $(this).is(":checked"));
});

function markAllRelated(relatedIds, check) {
    $.each(relatedIds, function (index, val) {
      $('#'+val)                        // the related element         
         .toggleClass("marked")         // add/remove the class
         .find("input[type=checkbox]")  // the input box
         .prop("checked", check);       // let's mark it
    });
}

＆＃13;

.box {
  display: inline-block;
  width: 130px;
  background-color: #ccc;
}
.clicked {
  background-color: #ff0;
}
.marked {
  background-color: #f00;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">

    <div id="134" class=box>
        <h3 related="157,202">Title</h3>
        <p>bla bla bla</p>
        <input name="" value="" type="checkbox">
    </div>

    <div id="157" class=box>
        <h3 related="134,202">Title</h3>
        <p>bla bla bla</p>
        <input name="" value="" type="checkbox">
    </div>

    <div id="167" class=box>
        <h3 related="205,210">Title</h3>
        <p>bla bla bla</p>
        <input name="" value="" type="checkbox">
    </div>

    <div id="202" class=box>
        <h3 related="134,157">Title</h3>
        <p>bla bla bla</p>
        <input name="" value="" type="checkbox">
    </div>

</div>

＆＃13;

Answer 2

您需要看到的内容是什么，它根据div.box h3属性中的ID将类添加到related，并在未选中时删除

＆＃13;

$('.box input').click(function() {
  var array = $(this).closest(".box").find("h3").attr('related').split(",");
  $.each(array, function(i) {
    $('#' + array[i]).toggleClass('someClass');
  });
});

＆＃13;

.someClass {
  color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">

  <div id="134" class=box>
    <h3 related="157,202">Title</h3>
    <p>bla bla bla</p>
    <input name="" value="" type="checkbox">
  </div>

  <div id="157" class=box>
    <h3 related="134,202">Title</h3>
    <p>bla bla bla</p>
    <input name="" value="" type="checkbox">
  </div>

  <div id="167" class=box>
    <h3 related="205,210">Title</h3>
    <p>bla bla bla</p>
    <input name="" value="" type="checkbox">
  </div>

  <div id="202" class=box>
    <h3 related="134,157">Title</h3>
    <p>bla bla bla</p>
    <input name="" value="" type="checkbox">
  </div>

</div>

＆＃13;

如何使用jQuery数组结果并将它们与div ID进行比较？

2 个答案: