javascript - 用jquery将点击的对象id变成变量进行优化

Question

你好，我想知道是否有一种方法可以让某些东西被点击，就像这里我想做的那样，这样当其中一个图像被点击时，我可以将它的 id 变成一个变量，然后从那里做一个if 语句，以便我可以在使用变量后淡出所有其他框并淡入。否则我将不得不通过单击 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(...)。您可以将其缩短为 $(...) 并节省一些打字时间。