在jQuery中使用多个选择器时如何确定被选元素？

Question

我正在编写带有两个 next 和 previous 按钮的简单淡入淡出幻灯片。

（使用语义-ui的按钮）

    <div id="slides_container">
        <div id="slide0" class="slide_image"><img src="images/slide0.png" alt=""></div>
        <div id="slide1" class="slide_image"><img src="images/slide1.png" alt=""></div>
        ...
    </div>
    <div id="slides_counter_container">
        <div class=" ... transition_button" id="previous_button">...</div>
        <div id="slides_counter"></div>
        <div class=" ... transition_button" id="next_button">...</div>
    </div>

我想在一个 jQuery 单击事件中处理按下 next 或 previous 按钮的两种情况。

$(".transition_button").click(function (){
    ...
    $("#slide"+current_slide).fadeOut(FADE_DURATION, function () {
        var temp = $(this).attr("id");
        if (temp == "next_button"){
            ...
            // current_slide ++
        }
        else{
            ...
            // current_slide --
        }
        // fadeIn() new current_slide
    });
});

通过使用 $(this).attr("id") 我将获得以下 id 之一：slide0 或 slide1 或 ...（取决于当前幻灯片编号，与next or previous 个按钮！

有什么问题？
我们如何才能具体找到divbuttonanchor等导致多重选择器事件被触发的？

Answer 1

有什么问题？

你现在正在这里获取 fadeOut 回调函数中的 id $(this) 是对 .slide_image 的引用，它是滑块 div 元素而不是被点击的元素

 $(".transition_button").click(function (){
  //move temp here 
 var temp = $(this).attr("id");
$("#slide"+current_slide).fadeOut(FADE_DURATION, function () {

    if (temp == "next_button"){
        ...
        // current_slide ++
    }
    else{
        ...
        // current_slide --
    }
    // fadeIn() new current_slide
  });
});

在jQuery中使用多个选择器时如何确定被选元素？

How to determine the selected element while using multiple selectors in jQuery?

javascript

jquery

javascript-events