javascript - 检查事件轮播项目是否具有值为 1 的属性

Question

我正在使用 boostrap 轮播:

<div class="carousel-item slide" data-llp-is-question="0"></div>
<div class="carousel-item slide" data-llp-is-question="0"></div>
<div class="carousel-item slide" data-llp-is-question="0"></div>
<!-- Two Questions together -->
<div class="carousel-item quest" data-llp-is-question="1"></div>
<div class="carousel-item quest" data-llp-is-question="1"></div>
<div class="carousel-item slide" data-llp-is-question="0"></div>
<div class="carousel-item slide" data-llp-is-question="0"></div>
<div class="carousel-item slide" data-llp-is-question="0"></div>
<div class="carousel-item quest" data-llp-is-question="1"></div>
<div class="carousel-item slide" data-llp-is-question="0"></div>

在上面您可以看到我正在轮播项目以及特定类上设置 data 标记。

我需要做的是有一个函数，每次移动幻灯片时都会触发该函数，以查看该项目是否是一个问题 data-llp-is-question="1" 以及如果是的话隐藏导航元素和其他一些 div。

我的功能:

function checkIfQuestionSlide()
{
    var $this;
    $this = $("#moduleSlideContainer");
    if ($("#moduleSlideContainer .carousel-inner .carousel-item").is(":visible") && $("#moduleSlideContainer .carousel-inner .carousel-item").data('llp-is-question')) {
        console.log('Is a question');
        $this.children(".section-previous").hide();
        $this.children(".section-continue").hide();
    }else{
        console.log('Is not a question');
        $this.children(".section-previous").show();
        $this.children(".section-continue").show();     
    }
};

我在 Document.Load 上调用它，也在此处调用:

$('#moduleSlideContainer').on('slide.bs.carousel','', checkIfQuestionSlide);

问题是我总是得到该项目不是问题的结果。

请有人指出我在哪里是白痴并告诉我正确的道路;)

Answer 1

以下内容将始终返回 true，因为在任何给定时间至少有一张幻灯片可见(这就是 is 的工作原理):

$("#moduleSlideContainer .carousel-inner .carousel-item").is(":visible")

并且这将始终返回 0(第一个匹配项的数据):

$("#moduleSlideContainer .carousel-inner .carousel-item").data('llp-is-question')

这解释了为什么每次都会得到相同的结果。正确的解决方案是 read the manual并使用幻灯片事件:

$("#moduleSlideContainer").on("slide.bs.carousel", function(e) {
  var $slide = $(e.relatedTarget);
  if ($slide.data("llp-is-question")) {
    console.log(e.relatedTarget, "is a question");
  } else {
    console.log(e.relatedTarget, "is not question");
  }
});