2

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

});
});
4

5 回答 5

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

});
});
于 2015-12-04T09:02:31.543 回答
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.

于 2015-12-04T09:01:05.757 回答
0

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

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

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

});

或者

于 2015-12-04T09:03:41.730 回答
0

使用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-index10，则：

$(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");
});
});
于 2015-12-04T09:01:14.157 回答
0

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

要获取当前单击项目的 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/

于 2015-12-04T09:08:30.863 回答