javascript - 单击一个元素然后执行其他相同的单击事件？

Question

HTML 代码:<span><i style="cursor: pointer;" id="saveProd" class="fa fa-heart-o" aria-hidden="true"></i></span>

此处，id="saveProd"将单击一个图标。然后运行这些 Jquery。

$(document).ready(function(){
    $("#qv1").click(function(e){
        //alert("qv1");
        //$("#saveProd").attr({"id":"save1"});
        $("#qvimage").attr({"src":"img/product/1.jpg"});    
        $("#qvbname").html("Luceat Pro");
        $("#qvpname").html("SELECTED Black Denim Jacket");
        $("#qvprice").html("5,900.00 €");
        $("#qvdis").html(" ");
        $("#qvoff").html("Offers : ");

        $("#saveProd").click(function(e){
            $("#saveProd").removeClass("fa-heart-o").addClass("fa-heart");
            $.localStorage("p1","product1");
        });
        value = $.localStorage('p1');
        if(value == "product1"){
            //alert(value);
            $("#saveProd").removeClass("fa-heart-o").addClass("fa-heart");
        }
        else {
            $("#saveProd").removeClass("fa-heart").addClass("fa-heart-o");
        }

        /*$(".close").click(function(e){
            $("#save1").attr({"id":"saveProd"});
            //console.log("Id Changed to saveProd");
        });*/
    });
});
$(document).ready(function(){
    $("#qv2").click(function(e){
        $("#qvimage").attr({"src":"img/product/2.jpg"});    
        $("#qvbname").html("Luceat Pro");
        $("#qvpname").html("Black Solid Jacket");
        $("#qvprice").html("<s style='color: grey; font-size: 12px;'>4,500.00 &nbsp;&euro;</s>&nbsp;2,250.00&nbsp;&euro;");
        $("#qvdis").html("&nbsp;(50% Off)");
        $("#qvoff").html("Offers : Get 50% Off");

        $("#saveProd").click(function(e){
            $("#saveProd").removeClass("fa-heart-o").addClass("fa-heart");
            $.localStorage("p2","product2");
        });
        value = $.localStorage('p2');
        if(value == "product2"){
            //alert(value);
            $("#saveProd").removeClass("fa-heart-o").addClass("fa-heart");
        }
        else {
            $("#saveProd").removeClass("fa-heart").addClass("fa-heart-o");  
        }
    });
});
$(document).ready(function(){
    $("#qv3").click(function(e){
        $("#qvimage").attr({"src":"img/product/3.jpg"});    
        $("#qvbname").html("Luceat Exlusive");
        $("#qvpname").html("Solid Brown Lether Jacket");
        $("#qvprice").html("<s style='color: grey; font-size: 12px;'>1,000.00 &nbsp;&euro;</s>&nbsp;500.00&nbsp;&euro;");
        $("#qvdis").html("&nbsp;(50% Off)");
        $("#qvoff").html("Offers : Get 50% Off");

        $("#saveProd").click(function(e){
            $("#saveProd").removeClass("fa-heart-o").addClass("fa-heart");
            $.localStorage("p3","product3");
        });
        value = $.localStorage('p3');
        if(value == "product3"){
            //alert(value);
            $("#saveProd").removeClass("fa-heart-o").addClass("fa-heart");
        }
        else {
            $("#saveProd").removeClass("fa-heart").addClass("fa-heart-o");
        }
    });
});

这里，首先单击#qv1，然后执行一些操作，然后单击#saveProd id，然后在本地执行存储。但是当点击 #qv3 并点击 #saveProd 然后存储 3 个值(如 Product1、Product2、Product3)时出现问题。

有什么解决办法吗？ 提前致谢!

Answer 1

问题是您不断向 #saveProd 元素分配越来越多的事件处理程序。在每个其他单击处理程序中，您可以为该单击处理程序分配另一个单击处理程序。因此，每次单击 #qvX 元素时，#saveProd 都会执行越来越多的操作。

一个快速而肮脏的修复方法是在分配新事件处理程序之前删除事件处理程序。首先，将所有 .click() 处理程序分配更改为 .on() 处理程序分配。像这样的事情:

$("#saveProd").on('click', function(e){
    //...
});

对每个 #saveProd 点击处理程序执行此操作。然后，在每个之前，调用 .off()删除任何点击处理程序:

$("#saveProd").off('click');
$("#saveProd").on('click', function(e){
    //...
});

这又是一个快速但肮脏的修复方法。 (也就是说，它应该让您的代码以最少的更改“工作”。)理想情况下，您不需要不断取消分配和重新分配点击处理程序。相反，在页面加载时分配一个单击处理程序:

$(document).ready(function(){

  $("#qv1").on('click', function(e){
    //...
  });

  $("#qv2").on('click', function(e){
    //...
  });

  $("#qv3").on('click', function(e){
    //...
  });

  $("#saveProd").on('click', function(e){
    //...
  });

});

然后，如果 #saveProd 的点击处理程序需要根据页面状态有条件执行不同的逻辑，请在该一次点击处理程序中执行这些条件检查。

让一个函数有条件地执行不同的操作，这本身也并不理想，但在这种情况下，它至少是朝着更好的设计迈出的一步。从那里您可以进一步重构，甚至可能完全消除对条件的需要。毕竟，大部分代码都是高度重复的，并且执行非常类似的事情。一点点重构可能会对您的代码大有帮助。每次都将所有三个值存储在本地存储中，即使其中一两个值是不必要的占位符默认值，这是否是一件可怕的事情？可能不是。