代码之家 › 专栏 › 技术社区 › cnrhgn

jquery方法在owl carousel中不起作用

owl-carousel html jquery

cnrhgn · 技术社区 · 6 年前

我有一个猫头鹰旋转木马,各种盒子都在旋转。

当我单击框中的按钮时,我想将类切换到同一框中的一个DIV。

当我把它包在猫头鹰传送带中并初始化它之前,它会很好地工作。之后,toggleClass方法(以及任何其他方法)似乎停止工作。

$(document).ready(function() {

  $('.view-offer').click(function() {

    var linkID = $(this).data('id')
    var el = '#box-' + linkID
    $(el).toggleClass('test');

    console.log(el);

  });

  $(".offers-slider").owlCarousel({
    nav: false,
    autoPlay: false,
    navText: [
      "<i class='fa fa-angle-left'></i>",
      "<i class='fa fa-angle-right'></i>"
    ],
    loop: true,
    dots: false,
    items: 3
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" rel="stylesheet" />
<div class="owl-carousel owl-theme offers-slider">

  <div class="item">
    <a href="#!" class="view-offer" data-id="1">View</a>
    <div id="box-1">
      Box 1
    </div>
  </div>

  <div class="item">
    <a href="#!" class="view-offer" data-id="2">View</a>
    <div id="box-2">
      Box 2
    </div>
  </div>

  <div class="item">
    <a href="#!" class="view-offer" data-id="3">View</a>
    <div id="box-3">
      Box 3
    </div>
  </div>

</div>

linkid将登录到控制台fine,但类不会添加到元素。根本没有错误。

1 回复 | 直到 6 年前

Richard Parnaby-King 6 年前

传送带中的每个元素都有相同的框列表,这意味着如果您有树框,则传送带中的每个项目都包含 #box-1 和 #box-2 和 #box-3 . 因此,您需要获得离您的链接最近的框:

$(document).ready(function() {

  $('.view-offer').click(function() {

    var linkID = $(this).data('id')
    var el = '#box-' + linkID
    $(this).siblings(el).toggleClass('test');

    console.log(el);

  });

  $(".offers-slider").owlCarousel({
    nav: false,
    autoPlay: false,
    navText: [
      "<i class='fa fa-angle-left'></i>",
      "<i class='fa fa-angle-right'></i>"
    ],
    loop: true,
    dots: false,
    items: 3
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" rel="stylesheet" />
<div class="owl-carousel owl-theme offers-slider">

  <div class="item">
    <a href="#!" class="view-offer" data-id="1">View</a>
    <div id="box-1">
      Box 1
    </div>
  </div>

  <div class="item">
    <a href="#!" class="view-offer" data-id="2">View</a>
    <div id="box-2">
      Box 2
    </div>
  </div>

  <div class="item">
    <a href="#!" class="view-offer" data-id="3">View</a>
    <div id="box-3">
      Box 3
    </div>
  </div>

</div>