Javascript 如果单击addClass，是否删除类？

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

<%= 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>

$（'.image clicker'）。单击（函数（）{
$（'排名'）.val（$（this）.data（'排名'）；
if（$（'#ranking'）.hasClass（'clicked'））{#条件不起作用。如果用户单击第二个图像，第一个图像将保持单击状态
$（'.clicked'）.removeClass（'clicked'））
}否则{
$（this.addClass（'clicked'）；
}
});

---

我试图合并此处的答案：，但它们对我无效。

将代码放在document.ready中

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


         //Place your javascript /jquery code here

    })
</script>

$（文档）.ready（函数（）{
//将javascript/jquery代码放在这里
})

将“单击”事件分配给“图像点击器”元素，但将“单击”类添加到隐藏字段中。元素引用混淆了，代码需要检查图像是否已被单击

这可能更接近您正在尝试的操作：

<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>

在这种情况下，您可能还希望在已知状态下启动单选按钮。在原始标记（ERB）中，您需要将“clicked”类添加到

image\u标记

元素之一。您只需在创建时将“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') %>

---

我认为阿朱·约翰是对的。但也许还有一点额外的提示

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

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

---

为什么要检查“点击”类的隐藏文件？你不应该检查图像点击器吗？

你试过使用toggleClass（）方法吗？是的@uDaY我试过

$（“#排名”）。toggleClass（'clicked'）尝试将jquery选择缓存到性能变量中，例如$rankings和$This为什么要向隐藏元素添加css类？它没有显示。尝试了那个Aju。行为上没有区别。单击图像后，即使单击新图像，它也会保持单击状态。谢谢你的努力！发现问题了..id=ranking和class=image clicker都是不同的标签。是吗？我想是的。不完全确定不同标记的含义i mean#排名是一个隐藏字段，图像点击器是一个图像标记，您正在将clicked类添加到图像，而不是隐藏字段。但是在您的情况下，您正在检查隐藏类，您永远不会将单击的类添加到隐藏字段谢谢Michael！你的后一个答案是有效的：]是的，单选按钮是一个很好的方式来描述我正在寻找的行为，谢谢你的时间，肯哈斯！我和迈克尔一起去是因为我不能让你的工作，但是谢谢你给我提供的关于这个的提示
<%= 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' : '')) %>

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