javascript - 内部点击中的 JQuery 错误 ID

Question

我正在尝试制作一个颜色选择器。在那里你得到了一些颜色立方体类的颜色立方体。 单击时，它会打开一个颜色选择器，其中包含一些具有不同颜色的列表项。 单击列表项时，它应该将 de color/text 返回给 de colorcube。

文档准备好后的第一个颜色选择工作。但在那之后它就不能正常工作了，因为它会记住所有以前的颜色立方体 ID，所以其他立方体的 ID 也会改变 :(

有没有清除缓存之类的方法？

$('.colorcube').click(function() {
    var colorcubeid = $(this).attr("id");
    $('#choicecolor').show();

    $(".li_color").click(function() {
        var colorid = "#" + this.id;
        var colorli = $(colorid).text();
        $('#' + colorcubeid).text(colorli);
        $('#' + colorcubeid).css({ 'background-color': '' + colorli + '' });
        $('#choicecolor').hide();
        savecolor();
    });

});

Answer 1

您正在分配冗余 click每次点击 colorcube 的事件处理程序.您应该只分配一次处理程序。

您这样做似乎是为了引用 colorcube 的 ID那被点击了。您可以改用变量来跟踪点击的对象。

var $currentCube,
    $choiceColor = $('#choicecolor');

$('.colorcube').click(function() {
    $currentCube = $(this);
    $choiceColor.show();
});

$(".li_color").click(function() {
    var colorli = $(this).text();
    $currentCube.text(colorli)
                .css({ 'background-color': colorli });
    $choiceColor.hide();
    savecolor();
});

我也做了一些改变。

我不是只引用当前颜色立方体的 ID，而是引用包装在 jQuery 对象中的实际元素，因此您可以直接调用它的方法。

这段代码:

var colorid = "#" + this.id;
var colorli = $(colorid).text();

...比需要的复杂得多，因为您可以这样做:

var colorli = $(this).text();

...哪里this是 <li>被点击了。

你不需要:

'' + colorli + ''

因为colorli已经是一个字符串。就这样

.css({ 'background-color': colorli })

作为@Šime Vidas注意，你应该缓存 $('#choicecolor');这样您就不会经常从 DOM 中选择它。

var $currentCube,
    $choiceColor = $('#choicecolor');

我还在这条线上使用了链接。使用 jQuery，您实际上不需要将针对同一个 jQuery 对象的函数调用分开。它们可以链接在一起。

$currentCube.text(colorli)
            .css({ 'background-color': colorli });