Question

这里是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");
    }

});
});

Answer 1

您只需在this回调中使用click即可确定点击的元素：

$("#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。

Answer 2

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

});
});

Answer 3

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

Answer 4

可能会对您有帮助，或者您也可以使用切换案例

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

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

});

OR

Answer 5

您不需要仅向z-index添加id到所有div，然后使用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/

点击功能有多个选择器，如何知道点击了哪个选择器？

5 个答案: