Question

所以，我想通过按向上或向下箭头让用户投票。应该说，并不太难。创建Ajax调用并不难，但是现在我仍然坚持视觉效果。

我的HTML：

<td class="td5">
  <a class="vote" href="#up"><em class="vote-icon up"></em></a>
  <a class="vote" href="#down"><em class="vote-icon down"></em></a>
</td>

CSS：

.vote.active { border-color: #ff8000; }
.vote-icon { background: url('votes.png') no-repeat; display: inline-block; width: 10px; height: 8px; }
.vote-icon.up { background-position: 0 0; }
 .vote-icon.up.active, .vote:hover .vote-icon.up { background-position: 0 -24px; }
.vote-icon.down { background-position: -20px 0; }
 .vote-icon.down.active, .vote:hover .vote-icon.down { background-position: -20px -24px; }

我的jQuery：

$(function() {
  $('.vote').click(function() {
    $(this).siblings('.vote-icon').removeClass('active');
    $(this).addClass('active');
    $('> .vote-icon', this).addClass('active');
 });
});

它使其处于活动状态，但如果单击另一个，则不会删除活动类。当您单击已经激活的投票时，它也不会删除它（和投票）。有什么帮助吗？

解决！

安顿下来：

    $(this).siblings('.vote-icon').toggleClass('active');
    $(this).siblings().find('.vote-icon').removeClass('active');
    $('> .vote-icon', this).toggleClass('active');

Answer 1

更改

$(this).siblings('.vote-icon').removeClass('active');

到

$(this).siblings().find('.vote-icon').removeClass('active');

Working demo here.

Answer 2

只需替换

$(this).siblings('.vote-icon').removeClass('active');

通过

$('.vote-icon').removeClass('active');

Answer 3

尝试使用toggleClass

$(this).siblings('.vote-icon').toggleClass('active');
$(this).toggleClass('active');
$('> .vote-icon', this).toggleClass('active');

Answer 4

$(function() {
  $('.vote').click(function() {
    $('.active').removeClass('active');
    $(this).addClass('active');
    $('> .vote-icon', this).addClass('active');
 });
});

投票系统 - onclick，活动类，也删除它

4 个答案: