Question

我有这个投票片段，并且我想将禁用的类添加到另一个按钮而不是用户按下的按钮。例如，如果用户在id 1帖子上投票+，则 - 按钮将获得禁用的类，但不会获得id 2。

<span class="pull-right">
              <a href="javascript:void(0)" class="vote" data-id="1" data-type="up">+</a>
              <span id="votes-1">0</span>
              <a href="javascript:void(0)" class="vote" data-id="1" data-type="down">-</a>
</span>
<span class="pull-right">
              <a href="javascript:void(0)" class="vote" data-id="2" data-type="up">+</a>
              <span id="votes-2">0</span>
              <a href="javascript:void(0)" class="vote" data-id="2" data-type="down">-</a>
</span>

我已经尝试了几个像.closest（）。find（）这样的东西，但是我无法使它工作。

Answer 1

遍历点击的.vote元素的父级。
使用.not()和this排除点击的.vote元素。

$('.vote').click(function() {
  var parent = $(this).parent();
  $(this).removeClass('disabled');
  parent.find('.vote').not(this).addClass('disabled');
});

.disabled {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<span class="pull-right">
              <a href="javascript:void(0)" class="vote" data-id="1" data-type="up">+</a>
              <span id="votes-1">0</span>
<a href="javascript:void(0)" class="vote" data-id="1" data-type="down">-</a>
</span>
<span class="pull-right">
              <a href="javascript:void(0)" class="vote" data-id="2" data-type="up">+</a>
              <span id="votes-2">0</span>
<a href="javascript:void(0)" class="vote" data-id="2" data-type="down">-</a>
</span>

Answer 2

$('.vote').click(function() {
  var parent = $(this).parent();
  $(this).removeClass('disabled');
  parent.find('.vote').not(this).addClass('disabled');
});

Answer 3

您可以使用多种方法。

以下jQuery代码是最短的代码。它需要所有兄弟姐妹并使用选择器过滤它们。数组中唯一的项目是另一个按钮：
```
$(".vote").click(function()
{
    $(this).siblings(".vote").addClass("disabled");        
});
```
您也可以这样做。它通过属性值进行全局搜索。如果您需要按属性id禁用文档中的其他内容，那就太好了。
```
$(".vote").click(function() {
    var id = $(this).data('id');
     $(".vote[data-id='" + id + "']").not(this).addClass("disabled");
});
```
另一个选项是遍历父级，按选择器获取元素并删除当前元素。在内部，它几乎与第一个相同。
```
$(".vote").click(function() {
    $(this).parent().find(".vote").not(this).addClass("disabled");        
});
```

选择最喜欢的一个。

按属性查找最接近的元素

3 个答案: