javascript - jQuery的内部点击错误的ID

我试图做一个拾色器。在哪里可以找到带有类colorcube的一些色块。
单击时，它将打开一个颜色选择器，其中包含一些列表项，这些列表项均具有不同的颜色。
单击列表项时，它应该将de color / text返回到colorcube。

准备好文档后的第一个色标。但是在那之后它不能正常工作，因为它会记住所有以前的colorcube 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();
    });

});

最佳答案

每次单击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();
});

我也做了一些更改。

我引用的是包装在jQuery对象中的实际元素，而不是仅引用当前颜色多维数据集的ID，因此您可以直接在其上调用方法。

这段代码：

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 });