removeClass(如果单击addClass）

removeClass if addClass clicked?

本文关键字：addClass 单击 如果 removeClass      更新时间：2023-09-26

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

<%= 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（），如果它存在的话，但它们对我不起作用。

将代码放入document.ready

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

         //Place your javascript /jquery code here
    })
</script>

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

在单击事件之后的几行中使用$（this）。根据我的经验，最好声明一个变量并将$（this）赋值给该变量。如果你不这样做，你就有可能在使用前更改$（this）值。我的工作：

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

为什么你要检查你的隐藏文件中的"点击"类？你不应该检查一下图像点击器吗？

"click"事件被分配给"image clicker"元素，但"clicked"类被添加到隐藏字段。元素引用是混合的，代码需要检查图像是否已经被单击。

这可能更接近于你想要做的事情：

<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的检查，并始终将"已单击"类添加到已单击的元素中。这样做：

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

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

<%= 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' : '')) %>
相关文章：