Question

您好我想知道是否有办法点击这里就像在这里我想要这样做，以便当其中一个图像被点击时我可以将它的id转换为变量并从那里做if语句使我可以在使用变量后淡出所有其他框和fadeIn。否则我将不得不通过点击id来制作6个单独的函数，这将使它更多的代码我认为这是一种优化它的方法，不确定是否有更好的方法来优化此代码，考虑到这可能会被复制6次我基本上想要一种方法将它们合并为一种。我感谢任何和所有的帮助已经看了一段时间，但似乎无法弄清楚可能得到另一个视角将有所帮助

jQuery(function(){
    jQuery(".catalignleft").click(function() {


        function complete() {
          jQuery(".alignleft");
        }

        if(status == 1) {
            jQuery("#box1").fadeOut();
            jQuery("#box2").fadeOut();
            jQuery("#box3").fadeOut();
            jQuery("#box4").fadeOut();
            jQuery("#box5").fadeOut();
            jQuery("#box6").fadeOut();
            jQuery("#box1").fadeIn();
            status--;
        } else{
        jQuery("#box1").fadeIn(1600, "linear", complete);
status++;
}



    });

    jQuery("#btn2").click(function() {
    jQuery("#box1").fadeOut();

    jQuery("#log").empty();
    });
    jQuery(".blocked a").click(function(event) {
  event.preventDefault();
  jQuery('<div/>')
});


    jQuery("#btn2").click(function() {

    jQuery("#box2").fadeOut();
    jQuery("#log").empty();
    });
});

Answer 1

使用类选择器而不是ID选择器，并将$(this).fadeIn放入fadeOut回调中，如下所示：

$(".box").click(function() {
    $(".box").fadeOut("slow", function() {
        $(this).fadeIn();
    });
});

（假设你的所有盒子都有一个“盒子”类）：

<div class="box"></div>

此外，没有理由使用jQuery(...)。您可以将其缩短为$(...)并节省一些打字。

Answer 2

正如Elliot在他的回答中所示，你可以使用 this 来引用当前对象（在这种情况下，被点击的对象）（即使你没有使用jQuery）。

将对象id单击转换为带有jquery的变量进行优化

2 个答案: