Javascript jQuery将类添加到最近的元素

我试过使用

.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').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();
  }
};

---

谢谢

您可以使用

最近的

和

查找

方法来实现这一点：

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

$（'.next arrow'）。单击（函数（）{
$（this）.closest（'.ct_as_arrow_nav'）.find（'.ct_amy_arrows_prev'）.addClass（“prev_show”）；
});
.prev\u show{
颜色：红色；
}
我{
字体大小：30px；
}
您可以这样做：

$(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).closest(".ct_as_arrow_nav")
       .find(".ct_amy_arrows_prev")
       .removeClass("prev_show");;

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

 <强>注释：< /强>如果Navs是动态创建的，那么考虑绑定事件类似！
编辑：
将
initbutions
更改为：

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

这样
gonewt
和
goprev
将
此
绑定到箭头按钮。
您知道结构。只需导航到父级，然后搜索上一个按钮。无需使用昂贵的操作，如
closest


$（'.ct\u amy\u arrows\u next'）。在（'click'，function（）上{
$（this.parent（）.find（'.ct_amy_arrows_prev'）.show（）；
});

单击哪个元素？我单击。下一个箭头这不起作用，没有添加类。你知道为什么吗？我还得把美元换成美元jQuery@MarcSommerson导航系统是动态创建的吗？在事件侦听器中放置一个警报，它会弹出吗？@MarcSommerson，我的回答是它对你不起作用？我添加了一个实时代码片段。@Alexandru IonutMihai我猜导航是动态生成的，需要事件委派！我不知道。如果你看他的帖子，你可以看到点击事件正在运行。谢谢，我已经修改了我的解决方案，并使用了显示隐藏而不是添加类。效果很好。