Question

嗨我正在使用jQuery UI的“可选”，我有多个垂直对齐的div作为列表，在选择每个div时div的背景更改为PINK，当我选择另一个DIV时，之前选择的那个应该更改为WHITE background 。截至目前，我实现了我所需要的，但问题是EACH功能。如果我有100个div，它会循环100次并检查以下条件。我的问题是如何避免这种循环并做出唯一的选择（即，没有两个DIV应该有相同的颜色）。

$(".selectDiv").click(function(){
    var clkLink = this.id;
    $(".selectDiv").each(function(){
        var clkLink2 = this.id;
        if(clkLink != clkLink2)
            $(clkLink2).css("background","#FF00CC");
        else
            $(clkLink2).css("background","#FFFFFF");
    });
});

Answer 1

如果您将颜色作为css类，则很容易做到：

$('.selectDiv').click(function(){
   $('.isSelected').removeClass('isSelected');
   $(this).addClass('isSelected');
});

Answer 2

这将重置所有内容，然后更改当前单击的内容：

$(".selectDiv").click(function(){
    $(".selectDiv").css("background","#FFFFFF");
    $(this).css("background","#FF00CC"); 
});

Answer 3

如果你是addClass而不是更改css，那么你可以按选择器中的类名进行过滤。

Answer 4

var currentDiv = null;

$('div.selectDiv').click(function() {
    if (currentDiv !== null) {
        currentDiv.css('background', '#ff00cc');
    }
    currentDiv = $(this);
    currentDiv.css('background', '#ffffff');
});

Answer 5

您的jQuery UI可选择点击事件不应使用您的div的点击事件自动分配。可选功能具有自己的事件绑定，称为“停止”。

var previousSelection = {}; // Use this to store the previous selection if desired

$('#selectDiv-Container').selectable({
                    stop: function() {
                        previousSelection = $(this);
                        $('.ui-selected', this).each(function() {
                            // Iterate through my new selections if desired.
                        });
                    }
                });

我假设您的可选列表有一个名为“selectDiv-Container”的容器，用于说明目的。如果您想将之前单击的项目保留在内存中（为其设置样式或其他内容），您可以将其缓存在上面的变量中（previousSelection）。

当您的用户点击您的列表时，会触发“停止”事件。您可以遍历所有选定的值并在此时设置其样式。

如何选择一个独特的DIV并使用jQuery取消选择其余的？

5 个答案: