jquery - 如果属性值小于 3，如何使用 jQuery 将类名添加到同级元素>

Question

如何给 data-value attribute-value 小于 3 的兄弟元素添加类名？

jQuery:

$("div").hover(function () {
    var it = $(this).siblings();
    if (parseInt(it.attr("data-value")) < 3)
    {
        $(it.addClass("checked"));
    }
});

HTML:

<div data-value="1">&nbsp;</div>
<div data-value="2">&nbsp;</div>
<div data-value="3">&nbsp;</div>
<div data-value="4">&nbsp;</div>
<div data-value="5">&nbsp;</div>

$("div").hover(function() {
  var it = $(this).siblings();
  if (parseInt(it.attr("data-value")) < 3) {
    $(it.addClass("checked"));
  }
});

/* edited to have the elements be visible, not present in the original question: */

div {
  height: 1em;
  border: 1px solid #000;
  margin: 0 auto 0.5em auto;
}

div.checked {
  border-color: #0f0;
}

div[data-value]::before {
  content: attr(data-value);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div data-value="1">&nbsp;</div>
<div data-value="2">&nbsp;</div>
<div data-value="3">&nbsp;</div>
<div data-value="4">&nbsp;</div>
<div data-value="5">&nbsp;</div>

Answer 1

尝试使用.attr() 的辅助函数来完成你的任务，

$("div").hover(function () {
    $(this).siblings().attr("data-value", function (_, val) {
        $(this).toggleClass('checked', parseInt(val) < 3);
    });
}, function () {
    $(this).siblings().removeClass();
});

DEMO