jquery - 与点击功能之间的冲突

Question

我在代码冲突方面遇到了一些问题，我检查了我的控制台是否有任何错误，但到目前为止，基本上没有通过 jGrowl 通知的几个选项。

我使用 jQuery 1.9.1

这是第一部分

                $("#amconf-images-139.amconf-images-container").click(function() {
        if ($('#amconf-image-84.amconf-image.amconf-image-selected').length){
            var a = $('input[name="qty2"]').val().replace("$", ""); 
            var b = $('#product-price-1202_clone span.price').html().replace("$", "");  
            $.jGrowl("1 inch Debossed Selected<br />Estimated Cost: $" + (a*b).toFixed(2));
        } else if ($('#amconf-image-86.amconf-image.amconf-image-selected').length){      
            $.jGrowl("1 inch Ink-Injected Selected<br />Estimated Cost: $" + (a*b).toFixed(2));
             } else if ($('#amconf-image-87.amconf-image.amconf-image-selected').length){      
            $.jGrowl("1 inch Printed Selected<br />Estimated Cost: $" + (a*b).toFixed(2));
        } 
});

上面的代码有效，但随后它杀死了第二部分

       $("#amconf-images-140").click(function() {
        if ($('#amconf-image-114.amconf-image.amconf-image-selected').length){
            $.jGrowl("Black Color Selected");
        } else if ($('#amconf-image-115.amconf-image.amconf-image-selected').length){      
            $.jGrowl("Brown Color Selected");
        } else if ($('#amconf-image-116.amconf-image.amconf-image-selected').length){      
            $.jGrowl("Green Color Selected");
        } else if ($('#amconf-image-117.amconf-image.amconf-image-selected').length){      
            $.jGrowl("Grey Color Selected");
        } else if ($('#amconf-image-118.amconf-image.amconf-image-selected').length){      
            $.jGrowl("Hot Pink Color Selected");
        } else if ($('#amconf-image-119.amconf-image.amconf-image-selected').length){      
            $.jGrowl("Hunter Green Color Selected");
        } else if ($('#amconf-image-120.amconf-image.amconf-image-selected').length){      
            $.jGrowl("Lavender Color Selected");
        } else if ($('#amconf-image-121.amconf-image.amconf-image-selected').length){      
            $.jGrowl("Light Blue Color Selected");
        } else if ($('#amconf-image-122.amconf-image.amconf-image-selected').length){      
            $.jGrowl("Light Pink Color Selected");
        } else if ($('#amconf-image-123.amconf-image.amconf-image-selected').length){      
            $.jGrowl("Lime Green Color Selected");
        } else if ($('#amconf-image-124.amconf-image.amconf-image-selected').length){      
            $.jGrowl("Maroon Color Selected");
        } else if ($('#amconf-image-125.amconf-image.amconf-image-selected').length){      
            $.jGrowl("Metallic Gold Color Selected");
        } else if ($('#amconf-image-126.amconf-image.amconf-image-selected').length){      
            $.jGrowl("Metallic Silver Color Selected");
        } else if ($('#amconf-image-127.amconf-image.amconf-image-selected').length){      
            $.jGrowl("Olive Green Color Selected");
        } else if ($('#amconf-image-128.amconf-image.amconf-image-selected').length){      
            $.jGrowl("Orange Color Selected");
        } else if ($('#amconf-image-129.amconf-image.amconf-image-selected').length){      
            $.jGrowl("Pearl Blue Color Selected");
        } else if ($('#amconf-image-130.amconf-image.amconf-image-selected').length){      
            $.jGrowl("Purple Color Selected");
        } else if ($('#amconf-image-131.amconf-image.amconf-image-selected').length){      
            $.jGrowl("Red Color Selected");
        } else if ($('#amconf-image-132.amconf-image.amconf-image-selected').length){      
            $.jGrowl("Reflex Blue Color Selected");
        } else if ($('#amconf-image-133.amconf-image.amconf-image-selected').length){      
            $.jGrowl("Teal Color Selected");
        } else if ($('#amconf-image-134.amconf-image.amconf-image-selected').length){      
            $.jGrowl("White Color Selected");
        } else if ($('#amconf-image-135.amconf-image.amconf-image-selected').length){      
            $.jGrowl("Yellow Color Selected");
        } else if ($('#amconf-image-136.amconf-image.amconf-image-selected').length){      
            $.jGrowl("Yellow Gold Color Selected");
        } 
     });

第二个 jquery 部分不想显示通知，可能是 div 太相似了吗？它们是完全独立的 div，具有自己的唯一编号。

有任何想法吗？

Answer 1

这可能会让你开始：

var amimages140 = {
    "114": "Black Color Selected",
        "115": "Brown Color Selected",
        "116": "Green Color Selected",
        "117": "Grey Color Selected",
        "118": "Hot Pink Color Selected",
        "119": "Hunter Green Color Selected",
        "120": "Lavender Color Selected",
        "121": "Light Blue Color Selected",
        "122": "Light Pink Color Selected",
        "123": "Lime Green Color Selected",
        "124": "Maroon Color Selected",
        "125": "Metallic Gold Color Selected",
        "126": "Metallic Silver Color Selected",
        "127": "Olive Green Color Selected",
        "128": "Orange Color Selected",
        "129": "Pearl Blue Color Selected",
        "130": "Purple Color Selected",
        "131": "Red Color Selected",
        "132": "Reflex Blue Color Selected",
        "133": "Teal Color Selected",
        "134": "White Color Selected",
        "135": "Yellow Color Selected",
        "136": "Yellow Gold Color Selected"
};

修复范围问题：

$("#amconf-images-139.amconf-images-container").click(function () {
    var a = '';
    var b = '';
    if ($('#amconf-image-84.amconf-image.amconf-image-selected').length) {
        a = $('input[name="qty2"]').val().replace("$", "");
        b = $('#product-price-1202_clone span.price').html().replace("$", "");
        $.jGrowl("1 inch Debossed Selected<br />Estimated Cost: $" + (a * b).toFixed(2));
    } else if ($('#amconf-image-86.amconf-image.amconf-image-selected').length) {
        $.jGrowl("1 inch Ink-Injected Selected<br />Estimated Cost: $" + (a * b).toFixed(2));
    } else if ($('#amconf-image-87.amconf-image.amconf-image-selected').length) {
        $.jGrowl("1 inch Printed Selected<br />Estimated Cost: $" + (a * b).toFixed(2));
    }
});

更简单的方法：

$("#amconf-images-140").click(function () {
    var im = '';
    for (im in amimages140) {
        if ($('#amconf-image-' + im + '.amconf-image.amconf-image-selected').length) {
            $.jGrowl(amimages140[im]);
        }
    }
});