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() if it exists，但它们并不适用于我。

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的检查，并始终将“单击的”类添加到单击的元素中。这样就可以了：

<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' : '')) %>

如果单击addClass，removeClass？

3 个答案: