点击函数上有多个选择器，如何知道点击了哪个选择器

Multiple selectors on click function, how to know which selector was clicked?

本文关键字：选择器 何知道 函数      更新时间：2023-09-26

Jquery新增。我在一个点击函数上有四个选择器，请参阅下面的代码，这是因为我希望在点击时对所有选择器都产生相同的效果，而不是为所有四个选择器创建一个点击功能。然而，当单击时，我希望函数识别被单击的选择器，这样我就可以对其中一个选择器执行操作，这就是为什么我使用id而不是类。更准确地说，我想将单击的选择器上的CSS设置为更高的z索引值，这样它就不会受到即将发生的效果的影响，在这种情况下，我希望单击的选择器的z索引为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");
    }
});
});

使用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");
    }
});
});

您可以简单地在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。

这可能会对您有所帮助，或者您也可以使用开关情况

$("#1, #2, #3, #4").click(function() {
if($(this).attr("id") == "1"){
//do sth
}else if($(this).attr("id") == "2"){
//do sth
}else{
//
}
});

OR

使用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的评论进行编辑，如果你希望点击的输入具有10的z-index，那么：

$(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");
});
});

您不需要将id添加到所有的div中，只需要将其添加到z索引中，然后使用jquery attr()函数

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

<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/

相关文章：