【问题标题】:How to add class to parent, if only first and last child having specific class如果只有第一个和最后一个具有特定班级的孩子,如何向父母添加班级
【发布时间】:2021-06-29 22:44:06
【问题描述】:

有人可以帮忙解决我的 jQuery 问题吗?

我的代码中有 Bootstrap 滑块。

每次我点击 Next/Prev 箭头时,相应的 div 都会被“选中”。

现在我想在只有第一个和最后一个 div 具有“选定”类的情况下向父级添加类

<div id="myCarousel" class="carousel slide" data-ride="carousel">

<div class="carousel-inner">
  <div class="carousel-item active">
    <div class="row">                                      
    <div id="carousel-selector-0" class="thumb selected" data-target="#myCarousel" data-slide-to="0"></div>                                             
    <div id="carousel-selector-1" class="thumb " data-target="#myCarousel" data-slide-to="1"></div>
    <div id="carousel-selector-2" class="thumb " data-target="#myCarousel" data-slide-to="2"></div>
    <div id="carousel-selector-3" class="thumb " data-target="#myCarousel" data-slide-to="3"></div>
    <div id="carousel-selector-4" class="thumb " data-target="#myCarousel" data-slide-to="4"></div>
   </div>
 </div>
</div>

<a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev"></a>
<a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next"></a>
   
</div>

if ($(".thumb").first().hasClass("selected")) {
     $(".carousel").addClass("new-class");
   } else {
     $(".carousel").removeClass("new-class");
}

if ($(".thumb").last().hasClass("selected")) {
     $(".carousel").addClass("new-class");
   } else {
     $(".carousel").removeClass("new-class");
}

提前致谢!

【问题讨论】:

    标签: jquery bootstrap-4


    【解决方案1】:

    只需将这些附加到按钮上,如

    $('[data-slide="prev"], [data-slide="back"]').click(function() {
          if ($(".thumb").first().hasClass("selected")) {
            $(".carousel").addClass("new-class");
          } else {
            $(".carousel").removeClass("new-class");
          }
    
          if ($(".thumb").last().hasClass("selected")) {
            $(".carousel").addClass("new-class");
          } else {
            $(".carousel").removeClass("new-class");
          }
        }
    

    【讨论】:

      猜你喜欢
      • 2022-01-21
      • 2018-08-11
      • 2023-03-23
      • 1970-01-01
      • 1970-01-01
      • 2015-05-11
      • 2013-06-23
      • 1970-01-01
      • 2013-11-11
      相关资源
      最近更新 更多