Проверка jQuery для клика с if / else

Question

Я пытаюсь проверить, не щелкнул ли идентификатор. Если это что-то сделать, в противном случае сделать что-то еще. Другая часть работает, но часть щелчка, похоже, не работает.

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

Скрипка для этого здесь. Он не выдает ошибку, но проверка щелчка просто не работает.

https://jsfiddle.net/cetx8vaL/

РЕДАКТИРОВАТЬ: По (превосходной) обратной связи я объясню свою цель. Я хочу, чтобы каждый из них "вращался" по одному, однако, если щелкнуть #rotators, я хочу, чтобы он прекратил вращаться и отображал все элементы в виде вертикального списка.

Answer 1

Похоже, вам нужно переместить блок if ($('#rotators').data('clicked')) { внутрь функции setInterval. Причина этого заключается в том, что if / else вычисляется при загрузке страницы, поэтому сразу оценивается как $('#rotators').data('clicked') === undefined и в результате постоянно запускает функцию setInterval.

Если вы переместите предложение if / else внутри функции setInterval, оно проверит, щелкает ли элемент каждые 500 мс.

Кажется, что приведенный ниже код достигает того, что вы ищете:

$(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);

});

Как сказал Рори в комментарии

На самом деле, это может быть проще, если вы описали свою цель в этом вопросе, поскольку я уверен, что есть лучший способ достичьчто бы это ни было

Ваш вопрос может быть примером XY Задачи - и, возможно, стоит объяснить цель, которую вы пытаетесь достичь с помощью приведенного выше кода. В любом случае, я надеюсь, что мой ответ в некоторой степени поможет вам понять.

Редактировать: После того, как вы увидели желаемую цель, вы ищете именно эту вещь: сделать список вертикальным? https://jsfiddle.net/0kn72ofp/

В настоящий момент ваш список ссылок не вращается по одной за раз, кажется, он сдвигает несколько символов за раз. Если вы хотите, чтобы он вращал одну ссылку за раз, я бы посоветовал рассмотреть что-то вроде эффектов Slide или slideToggle пользовательского интерфейса jQuery.