Question

我正在尝试制作一个颜色选择器。你有几个颜色立方体与类colorcube。单击时，它会打开一个颜色选择器，其中包含一些列表项，这些列表项都具有不同的颜色。单击列表项时，应将de color / text返回de 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();
    });

});

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

Answer 2

我试图解开为什么你需要嵌套的点击功能。好像你应该能够解开它们。您可能需要添加一些jquery来获取第二个函数中的'colorcubeid'。

我相信发生的事情是'colorcubeid'变量属于内部点击功能的范围，永远不会被更新。

鲍勃

Answer 3

您需要unbind以前的点击处理程序，以便不会再次调用它们。

但是我建议避免这种情况，并通过jQuery模板或类似方法创建#choicecolor的干净实例 - 如果不反复回收控件，可以省去很多麻烦。

内部点击时JQuery错误的ID

3 个答案: