jQuery check for click with if/else

Question

I'm trying to check to see if an id was clicked. If it is do something, otherwise do something else. The else part is working but the click part doesn't seem to be.

$(document).ready(function() {

  $("#rotators").click(function() {
    $(this).data('clicked', true);
  });

  if ($('#rotators').data('clicked')) {
    $("#rotators").css({
      "overflow": "auto"
    });
    $("#rotators").css({
      "height": "auto"
    });
  } else {

    setInterval(function() {

      if ($("#rotatelist > a:last").is(":visible")) {
        $("#rotatelist a:last").after($("#rotatelist a:first"));
        $("#rotators").css({
          "overflow": "hidden"
        });
        $("#rotators").css({
          "height": "30px"
        });
      }

    }, 500);

  }

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="rotators">
  <span id="rotatelist"><a href="#">solutions</a><a href="#">film</a><a href="#">seo</a><a href="#">pr</a><a href="#">web development</a><a href="#">marketing</a></span>
</div>

The fiddle for it is here. It doesn't throw an error but the click check just isn't working.

https://jsfiddle.net/cetx8vaL/

EDIT: Per the (excellent) feedback I will explain my goal. I want each to "rotate" one at a time, however, if the #rotators is clicked I want it to stop rotating and show all of the elements as a vertical list.

if ($('#rotators').data('clicked')) will always be false because you only check it once (on page load). — user7290573
– user7290573, Commented Oct 8, 2019 at 15:38
You're also not checking for $('#rotators').data('clicked') in your interval function... — Heretic Monkey
– Heretic Monkey, Commented Oct 8, 2019 at 15:38
You only ever check data('clicked') when the page loads. It would make far more sense to put all the logic which executes within that if statement in the click handler, as then you know the element has actually been clicked. — Rory McCrossan
– Rory McCrossan, Commented Oct 8, 2019 at 15:38
In fact, it may be easier if you described your goal in the question as I am certain there's a better way to achieve whatever it is — Rory McCrossan
– Rory McCrossan, Commented Oct 8, 2019 at 15:39

Max · Accepted Answer · 2019-10-09 08:08:23Z

It looks like you need to move your if ($('#rotators').data('clicked')) { block inside of the setInterval function. The reason for this is the if/else is evaluated on page load so it's immediately evaluated as $('#rotators').data('clicked') === undefined and as a result fires the setInterval function perpetually.

If you move the if/else clause inside the setInterval function it will check whether the element has been clicked every 500ms.

The below code seems to achieve what you're looking for:

$(document).ready(function() {

$("#rotators").click(function() {
    $(this).data('clicked', true);
});

setInterval(function() {
    if ($('#rotators').data('clicked')) 
    {
        $("#rotators").css({
                            "overflow": "auto"
        });
        $("#rotators").css({
                            "height": "auto"
        });
    } 
    else if ($("#rotatelist > a:last").is(":visible")) 
    {
        $("#rotatelist a:last").after($("#rotatelist a:first"));
        $("#rotators").css({
                            "overflow": "hidden"
        });
        $("#rotators").css({
                            "height": "30px"
        });
    }
}, 500);

});

As Rory said in a comment

In fact, it may be easier if you described your goal in the question as I am certain there's a better way to achieve whatever it is

Your question may be an example of an XY Problem -- and it might be worth explaining the goal you're trying to achieve with the above code. Either way, I hope my answer helps your understanding somewhat.

Edit: After seeing your desired goal, is this the kind of thing you're looking for re: making the list vertical? https://jsfiddle.net/0kn72ofp/

At the moment your list of links doesn't rotate one at a time, it seems to shift a few characters at a time. If you want it to rotate one link at a time I'd suggest looking into something like jQuery UI's Slide or slideToggle effects.

Collectives™ on Stack Overflow

jQuery check for click with if/else

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related