Question

我尝试使用.next()，.closest() .parent()，但没有使用它们。

这是我的html标记：

<div id="arrownav1" class="ct_as_arrow_nav ">
    <div class="ct_amy_arrows_next">
        <i class="fa fa-angle-right next-arrow"></i>
    </div>
    <div class="ct_amy_arrows_prev">
        <i class="fa fa-angle-left prev-arrow"></i>
    </div>
</div>

我试图在用户第一次点击右箭头后显示左箭头。

我把它藏起来：

jQuery('.ct_amy_arrows_prev').removeClass("prev_show");

然后我用以下方式显示：

jQuery('.ct_amy_arrows_prev').addClass("prev_show");

它有效，但由于页面上有多个滑块实例，因此单击第一个滑块可激活所有滑块上的所有左箭头。

所以我需要一种方法来激活那个最接近的元素并为它添加prev_show类。我做错了什么？

整个导航代码：

//Navigation
//==================================================
function initButtons() {
  jQuery('#arrownav' + sliderID + ' .next-arrow').click(function() {
    gonext();
  });
  jQuery('#arrownav' + sliderID + ' .prev-arrow').click(function() {
    goprev();
  });
}
var stopnextslide = 0;

function gonext() {
  var stopnextslide = 0;
  var n = jQuery('#ct_as_amy_sliderid' + sliderID + ' ct_amy_section').length;

  jQuery('#ct_as_amy_sliderid' + sliderID + ' ct_amy_section').each(function() {
    if (jQuery(this).hasClass('bespoke-active') && Number(jQuery(this).attr('rel')) + 3 == n) {
      deck.slide(0);
      stopnextslide = 1;
    }
  });
  if (stopnextslide != 1) {
    jQuery(this).closest(".ct_as_arrow_nav").find(".ct_amy_arrows_prev").addClass("prev_show");
    deck.next();
  }
};

function goprev() {
  var stopnextslide = 0;

  var n = jQuery('#ct_as_amy_sliderid' + sliderID + ' ct_amy_section').length;

  jQuery('#ct_as_amy_sliderid' + sliderID + ' ct_amy_section').each(function() {
    if (jQuery(this).hasClass('bespoke-active') && Number(jQuery(this).attr('rel')) == 3) {

      deck.slide(n - 1);
      stopnextslide = 1;
    }
    if (jQuery(this).hasClass('bespoke-active') && Number(jQuery(this).attr('rel')) == 1) {

    }
  });
  if (stopnextslide != 1) {
    deck.prev();
  }
};

由于

Answer 1

你知道结构。只需向上导航到父级，然后搜索上一个按钮。无需使用closest

等昂贵的操作

＆＃13;

$('.ct_amy_arrows_next').on('click', function() {
  $(this).parent().find('.ct_amy_arrows_prev').show();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="arrownav1" class="ct_as_arrow_nav ">
    <div class="ct_amy_arrows_next">
        <i class="fa fa-angle-right next-arrow">&gt;</i>
    </div>
    <div class="ct_amy_arrows_prev" style="display: none;">
        <i class="fa fa-angle-left prev-arrow">&lt;</i>
    </div>
</div>

＆＃13;

Answer 2

您可以使用closest和find方法实现此目的：

$('.next-row').click(function(){
    $(this).closest('.ct_as_arrow_nav').find('.ct_amy_arrows_prev').addClass("prev_show");
});

＆＃13;

$('.next-arrow').click(function(){  
 $(this).closest('.ct_as_arrow_nav').find('.ct_amy_arrows_prev').addClass("prev_show");
});

＆＃13;

.prev_show{
   color:red;
}
i{
   font-size:30px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>
<div id="arrownav1" class="ct_as_arrow_nav ">
    <div class="ct_amy_arrows_next">
        <i class="fa fa-angle-right next-arrow"></i>
    </div>
    <div class="ct_amy_arrows_prev">
        <i class="fa fa-angle-left prev-arrow"></i>
    </div>
</div>
<div id="arrownav2" class="ct_as_arrow_nav ">
    <div class="ct_amy_arrows_next">
        <i class="fa fa-angle-right next-arrow"></i>
    </div>
    <div class="ct_amy_arrows_prev">
        <i class="fa fa-angle-left prev-arrow"></i>
    </div>
</div>

＆＃13;

Answer 3

你可以这样做：

$(this).closest(".ct_as_arrow_nav")
       .find(".ct_amy_arrows_prev")
       .removeClass("prev_show");;

或者像这样：

$(this).parent()
       .next(".ct_amy_arrows_prev")
       .removeClass("prev_show");

注意：如果导航是动态创建的，请考虑绑定this之类的事件！

修改

将您的initButtons更改为：

function initButtons() { jQuery('#arrownav' + sliderID + ' .next-arrow').click(gonext); jQuery('#arrownav' + sliderID + ' .prev-arrow').click(goprev); }

以便gonewt和goprev将this绑定到箭头按钮。

jQuery将类添加到最近的元素

3 个答案: