jQuery 检查点击 if/else

Question

我正在尝试检查是否单击了 id。如果是做某事，否则做其他事。else 部分正在工作，但点击部分似乎没有。

$(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永久触发该函数。如果您在setInterval函数内移动 if/else 子句，它将每 500 毫秒检查一次该元素是否已被单击。下面的代码似乎实现了你想要的：$(document).ready(function() {$("#rotators").click(function() {&nbsp; &nbsp; $(this).data('clicked', true);});setInterval(function() {&nbsp; &nbsp; if ($('#rotators').data('clicked'))&nbsp;&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; $("#rotators").css({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "overflow": "auto"&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; $("#rotators").css({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "height": "auto"&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; }&nbsp;&nbsp; &nbsp; else if ($("#rotatelist > a:last").is(":visible"))&nbsp;&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; $("#rotatelist a:last").after($("#rotatelist a:first"));&nbsp; &nbsp; &nbsp; &nbsp; $("#rotators").css({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "overflow": "hidden"&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; $("#rotators").css({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "height": "30px"&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; }}, 500);});正如罗里在评论中所说事实上，如果你在问题中描述你的目标可能会更容易，因为我确信有更好的方法来实现它您的问题可能是XY 问题的一个示例- 可能值得解释您尝试使用上述代码实现的目标。无论哪种方式，我希望我的回答对您的理解有所帮助。编辑：在看到您想要的目标后，这是您正在寻找的事情吗：使列表垂直？https://jsfiddle.net/0kn72ofp/目前您的链接列表不会一次旋转一个，它似乎一次移动几个字符。如果您希望它一次旋转一个链接，我建议您查看 jQuery UI 的 Slide 或 slideToggle 效果之类的东西。