Question

我在循环中有一组2个按钮。

<button class="dislike-btn" data-id="dislikeBtn-1>">Dislike</button>
<button class="like-btn" data-id="likeBtn-1">Like</button>
<br />
<button class="dislike-btn" data-id="dislikeBtn-2">">Dislike</button>
<button class="like-btn" data-id="likeBtn-2">Like</button>
<br />
<button class="dislike-btn" data-id="dislikeBtn-3">">Dislike</button>
<button class="like-btn" data-id="likeBtn-3">Like</button>

所需功能仅适用于每个集合/迭代中的一个按钮，这是通过从另一个按钮添加/删除类（.dislike-btn-solid for .dislike-btn and .like-btn-solid for .like-btn）来实现的。换句话说，如果用户点击“赞”，.like-btn-solid已添加到.like-btn，如果.like-btn-solid上选择了.dislike-btn，则会将其删除。

我需要jQuery的帮助，特别是在选择按钮Id的时候。我尝试过不同的函数，例如nearest（），hasClass（），removeClass（）但是被选中的正确ID卡住了。很明显，jQuery不是我的力量所以非常欣赏一个正确方向的工作示例或指针。谢谢！

Answer 1

单选按钮可能是一个更好的工具，但如果它必须是普通按钮：
您可以设置两个按钮的任何data-*属性相同，然后使用它，就像这样（如果我正确地知道如何添加/删除类，则不是100％确定）：

＆＃13;

$('.like-btn').click(function(){
  var $button = $(this);
  var buttonNumber = $button.data('button');

  $button.addClass('like-btn-solid');
  $('.dislike-btn[data-button="'+buttonNumber+'"]').removeClass('dislike-btn-solid');
});

$('.dislike-btn').click(function(){
  var $button = $(this);
  var buttonNumber = $button.data('button');

  $button.addClass('dislike-btn-solid');
  $('.like-btn[data-button="'+buttonNumber+'"]').removeClass('like-btn-solid');
});

＆＃13;

.dislike-btn-solid {
  color: red;
}

.like-btn-solid {
  color: blue;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="dislike-btn" data-id="dislikeBtn-1" data-button="1">Dislike</button>
<button class="like-btn" data-id="likeBtn-1" data-button="1">Like</button>
<br />
<button class="dislike-btn" data-id="dislikeBtn-2" data-button="2">Dislike</button>
<button class="like-btn" data-id="likeBtn-2" data-button="2">Like</button>
<br />
<button class="dislike-btn" data-id="dislikeBtn-3" data-button="3">Dislike</button>
<button class="like-btn" data-id="likeBtn-3" data-button="3">Like</button>

＆＃13;

我确定你可以在一个单击处理程序中为两者做到这一点，但你可能会更清楚地将它分开这样。

jQuery在PHP循环内部的按钮之间更改/切换类

1 个答案: