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 &euro;");
        $("#qvdis").html("&nbsp;");
        $("#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的点击处理程序需要有条件地根据页面状态执行不同的逻辑，请在该单击处理程序中执行这些条件检查。

哪个本身也不理想，让一个函数有条件地做不同的事情，但在这种情况下，它至少是迈向更好设计的一步。从那里你可以进一步重构，甚至可以完全消除对条件的需求。毕竟，这些代码的大部分是高度重复，并且非常类似的东西。对您的代码进行一些重构可能会有很长的路要走。从......开始，每次将所有三个值存储在本地存储中是否是一件非常糟糕的事情，即使其中一个或两个是不必要的占位符默认值？可能不是。

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

1 个答案: