jQuery 检查点击 if/else

我正在尝试检查是否单击了 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,我希望它停止旋转并将所有元素显示为垂直列表。


芜湖不芜
浏览 181回答 1
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 效果之类的东西。
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript