单击功能上的多个选择器，如何知道单击了哪个选择器？

Posted 2023-03-21

【中文标题】单击功能上的多个选择器，如何知道单击了哪个选择器？

【英文标题】：Multiple selectors on click function, how to know which selector was clicked?

【发布时间】：2015-12-04 08:58:21

【问题描述】：

这里是 Jquery 的新手。我在点击功能上有四个选择器，请参见下面的代码，这是因为我希望在点击时对所有选择器产生相同的效果，而不是为所有四个选择器创建一个点击功能。但是，当单击时，我希望函数识别单击了哪个选择器，以便我可以对其中一个选择器执行操作，这就是我使用 id 而不是类的原因。更准确地说，我想将单击选择器上的 CSS 设置为更高的 z-index 值，这样它就不会受到将要发生的效果的影响，在这种情况下，我希望单击的选择器具有 z-index 值10 个。

我尝试使用 if 语句，见下文，但它不起作用，有人知道怎么做吗？

<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
<div id="4"></div>

我的 jQuery 尝试：

$(document).ready(function(e) 

var effect = $("#slide");

$("#1, #2, #3, #4").click(function() 

    effect.animate(width: "1100px", 200, "easeOutQuint");
    $("#2").data('clicked', true);

    if ($("#2").data('clicked')) 
       $("#2").css("z-index", "10");
    

);
);

【问题讨论】：

e.target 用于此

使用this 引用调用处理程序的元素

【参考方案1】：

使用this关键字：

$(document).ready(function(e) 

var effect = $("#slide");

$("#1, #2, #3, #4").click(function() 

    effect.animate(width: "1100px", 200, "easeOutQuint");
    $(this).data('clicked', true);

    if ($(this).data('clicked')) 
       $(this).css("z-index", "10");
    

);
);

【参考方案2】：

您可以在click 回调中简单地使用this 来确定被点击的元素：

$("#1, #2, #3, #4").click(function() 
    effect.animate(width: "1100px", 200, "easeOutQuint");
    $(this).data('clicked', true);

    if ($(this).data('clicked')) 
        $(this).css("z-index", "10");
    
);

但是，为了使其正常工作，您不需要使用 ID。如果可能，最好使用一个通用类而不是 ID：

<div class="myClass"></div>
<div class="myClass"></div>
<div class="myClass"></div>
<div class="myClass"></div>

在 javascript 中：

$(document).ready(function(e) 
    var effect = $("#slide");

    $(".myClass").click(function() 
        effect.animate(width: "1100px", 200, "easeOutQuint");
        $(this).data('clicked', true);

        if ($(this).data('clicked')) 
           $(this).css("z-index", "10");
        
    );
);

请注意，您的if ($(this).data('clicked')) 条件没有多大意义。由于您在条件之前将clicked 设置为true，因此它将始终为true。

【讨论】：

它们在 html5 中不是无效的，它们也不必是类（我建议澄清使用类是一个更好的主意）。

@SpencerWieczorek 哦，谢谢。我已经删除了这部分:)

【参考方案3】：

这可能会对您有所帮助，或者您也可以使用 switch case

$("#1, #2, #3, #4").click(function() 

if($(this).attr("id") == "1")
//do sth
else if($(this).attr("id") == "2")
//do sth
else
//


);

或

【讨论】：

这种方法在这种情况下真的是多余的。

【参考方案4】：

使用event.target:

$(document).ready(function(e) 

var effect = $("#slide");

$("#1, #2, #3, #4").click(function(event) 

    effect.animate(width: "1100px", 200, "easeOutQuint");
    $("#2").data('clicked', true);

    if($(event.target).attr("id") == "2" )
       $("#2").css("z-index", "10");
    

);
);

根据@Spencer Wieczorek 评论进行编辑，如果您希望点击输入的z-index 为 10，则：

$(document).ready(function(e) 

var effect = $("#slide");

$("#1, #2, #3, #4").click(function(event) 

    effect.animate(width: "1100px", 200, "easeOutQuint");
    $("#2").data('clicked', true);

    $(event.target).css("z-index", "10");
);
);

【讨论】：

" 我希望单击的选择器的 z-index 值为 10"

【参考方案5】：

您不需要将所有 div 的 id 仅添加到 z-index 之一，然后使用 jquery attr() 函数

获取当前点击项的id（$(this)指当前点击项），如果条件为真则添加z-index 试试这个：

<div></div>
<div id="zindex"></div>
<div></div>
<div></div>


   $(document).ready(function(e) 

    var effect = $("#slide");

    $("div").click(function() 

        effect.animate(width: "1100px", 200, "easeOutQuint");
        if ($(this).attr('id') == "zindex") 
           $(this).css("z-index", "10");
        

    );
    );

见 jsfiddle:https://jsfiddle.net/596w1hwr/