removeClass如果单击了addClass？

Question

如果点击了新排名，我们如何自动取消上一次点击？

<%= f.hidden_field(:ranking, id: 'ranking') %>
<%= image_tag('4.png', data: { ranking: 4 }, class: 'image-clicker') %>
<%= image_tag('3.png', data: { ranking: 3 }, class: 'image-clicker') %>
<%= image_tag('2.png', data: { ranking: 2 }, class: 'image-clicker') %>
<%= image_tag('1.png', data: { ranking: 1 }, class: 'image-clicker') %>

<script>
  $('.image-clicker').click(function() {
    $('#ranking').val($(this).data('ranking'));
    if ($('#ranking').hasClass('clicked')){ #Conditional doesn't work. If user clicks on second image the first image will stay clicked
      $('.clicked').removeClass('clicked')
    }else{
      $(this).addClass('clicked');
    }
  });
</script>

我试图从这里合并答案： removeClass（）如果存在 ，但是它们对我不起作用。

Answer 1

将您的代码放入document.ready

<script>
    $(document).ready(function(){


         //Place your javascript /jquery code here

    })
</script>

Answer 2

我认为Aju John是对的。 但也许还有一点额外的提示。

您可以在$ click事件之后使用$（this）几行。 以我的经验，最好声明一个变量并将$（this）分配给该变量。 如果不这样做，则可能会在使用$（this）值之前冒险更改它。 我所做的：

$('.image-clicker').click(function(){
{
    var r = $(this);
    $('.image-clicker').removeClass('clicked');
    r.addClass('clicked')
}

以及为什么要检查隐藏的fild是否为“ clicked”类？ 您不应该检查图像点击器吗？

Answer 3

“单击”事件已分配给“图像单击器”元素，但“已单击”类已添加到隐藏字段。 元素引用混合在一起，并且代码需要检查以查看图像是否已被单击。

这可能更接近您要执行的操作：

<script>
  $('.image-clicker').click(function() {
    $('#ranking').val($(this).data('ranking'));
    var already_clicked = $(this).hasClass('clicked');
    $('.clicked').removeClass('clicked')
    if (!already_clicked) {
      $(this).addClass('clicked');
    }
  });
</script>

该already_clicked检查确定图像已被点击，它可以告诉是否保留单击从其他图像清理现有的“点击”类后。

请注意，这将使所有图像变为“未单击”状态。 如果您希望它的行为像单选按钮一样，则already_clicked已经为already_clicked的检查，并始终将“ clicked”类添加到被单击的元素中。 这样可以做到：

<script>
  $('.image-clicker').click(function() {
    $('#ranking').val($(this).data('ranking'));
    $('.clicked').removeClass('clicked')
    $(this).addClass('clicked');
  });
</script>

在这种情况下，您可能还希望以已知状态启动单选按钮。 在原始标记（ERB）中，您想将'clicked'类添加到image_tag元素之一。 您只需在创建时将“ clicked”类添加到其中一张图像即可，如下所示：

<%= f.hidden_field(:ranking, id: 'ranking') %>
<%= image_tag('4.png', data: { ranking: 4 }, class: 'image-clicker clicked']) %>
<%= image_tag('3.png', data: { ranking: 3 }, class: 'image-clicker') %>
<%= image_tag('2.png', data: { ranking: 2 }, class: 'image-clicker') %>
<%= image_tag('1.png', data: { ranking: 1 }, class: 'image-clicker') %>

您还可以根据模型中变量或字段的值动态地执行此操作。 假设一个名为变量ranking包含此值，考虑这个初始化代码：

<%= f.hidden_field(:ranking, id: 'ranking') %>
<%= image_tag('4.png', data: { ranking: 4 }, class: 'image-clicker' + (ranking == '4' ? ' clicked' : '')) %>
<%= image_tag('3.png', data: { ranking: 3 }, class: 'image-clicker' + (ranking == '3' ? ' clicked' : '')) %>
<%= image_tag('2.png', data: { ranking: 2 }, class: 'image-clicker' + (ranking == '2' ? ' clicked' : '')) %>
<%= image_tag('1.png', data: { ranking: 1 }, class: 'image-clicker' + (ranking == '1' ? ' clicked' : '')) %>