Question

我正在使用boostrap carousel：

<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");
  }
});

Answer 2

bootstrap carousel应该有一个名为relatedTarget的属性，你可以使用（取决于你使用的版本）

$(".carousel").on('slide.bs.carousel', (e) ->
    console.log(e.relatedTarget);
)

relatedTarget是进入视图的元素。希望这有帮助。

检查活动轮播项是否具有值为

2 个答案: