removeClass if addClass clicked?

Question

If a new ranking is clicked how can we automatically declick the previous click?

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

I tried to incorporate the answers from here: removeClass() if it exists, but they didn't work for me.

try and cache your jquery selections into variables for performance, for example $rankings and $this — max pleaner, May 05 '16 at 18:08
Why do you want to add a css class to a hidden element? It is not displayed. — Uzbekjon, May 05 '16 at 18:18

score 3 · Answer 1 · answered May 05 '16 at 18:06

3

Place your code inside document.ready

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


         //Place your javascript /jquery code here

    })
</script>

answered May 05 '16 at 18:06

Aju John

2,214
1
10
27

Tried that Aju. No difference in behavior. Once an image is clicked it stays clicked even if I click a new image. Thanks for trying! – AnthonyGalli.com May 05 '16 at 18:11
Got the issue..id=ranking and class=image-clicker both are different tags. Isn't it?? – Aju John May 05 '16 at 18:14
I think so. Not entirely sure what you mean by different tags – AnthonyGalli.com May 05 '16 at 18:17
I mean #ranking is a hidden field and image-clicker is an image tag – Aju John May 05 '16 at 18:18
And you are adding clicked class to the image, not to the hidden field. But in your condition you are checking with the hidden class, you are never adding clicked class to the hidden field – Aju John May 05 '16 at 18:20
Yea Michael hit the sweet spot. Thanks for shedding light on the root of the problem :] – AnthonyGalli.com May 05 '16 at 18:28

score 2 · Answer 2 · answered May 05 '16 at 18:21

i think Aju John is right. But maybe a little additional tip.

you use $(this) a couple of lines after the click event. In my experience it's better to declare a variable and assign $(this) to that variable. If you don't, you risk changing the $(this) value before you use it. what i do:

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

And why do you check your hidden fild for the 'clicked' class ? Shouldn't you be checking the image-clickers ?

Thanks for your time kenhas! I went with Michael because I couldn't get yours to work, but thanks for the tip about `this` :] — AnthonyGalli.com, May 05 '16 at 18:27

Michael Gaskill · Accepted Answer · 2016-05-05T18:49:21.453

The 'click' event is assigned to your 'image-clicker' elements, but the 'clicked' class is added to the hidden field. The element references are mixed up, and the code needs to check to see if the image has already been clicked.

This might be closer to what you're trying to do:

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

The already_clicked check determines if the image is already clicked, so that it can tell whether to keep click it after clearing the existing 'clicked' classes from the other images.

Note that this will allow all images to become 'unclicked'. If you want this to behave like radio buttons, you can leave out the check for already_clicked and always add the 'clicked' class to the element that was clicked. This will do that:

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

In this case, you'll likely also want to start your radio buttons in a known state. In the original markup (ERB), you would want to add the 'clicked' class to one of the image_tag elements. You simply have to add the 'clicked' class to one of the images at creation time, like so:

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

You can also do this dynamically, based on the value of a variable or field from your model. Assuming that a variable named ranking contains this value, consider this initialization code:

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

Thanks Michael! Your latter answer was the one that worked :] Yea radio buttons was a good way to describe the behavior I was looking for — AnthonyGalli.com, May 05 '16 at 18:27

removeClass if addClass clicked?

3 Answers3