Question

我有一个可以使用jqueryui选择的项目列表。我试图检查是否选择了一个项目，如果是，则将一个类添加到另一个div。

HTML：

<div class="container">
  <ul id="selectable">
   <li id="object1" class="ui-selected">Object 1</li>
   <li id="object2">Object 2</li>
   <li id="object3">Object 3</li>
   <li id="object4">Object 4</li>
   <li id="object5">Object 5</li>
   <li id="object6">Object 6</li>
  </ul>
</div>

<div id="otherObject"></div>

CSS：

#object1, #object2, #object3, #object4, #object5, #object6 {
   width:100px;
   height:100px;
}
#otherObject {
   width:100px;
   height:100px;
   position:relative;
   top: 0px;
}
#otherObject.newClass {
   top: 50px;
}

jQuery的：

$('#object1').click(function(){
 if ($('#object1').hasClass('ui-selected')){
     $('#otherObject').addClass('newClass');
    }
});

非常感谢任何帮助。我确定我错过了一些简单的事情。谢谢！

Answer 1

实际上，使用slightly quicker而不是is()是hasClass()。以下代码应该可以实现您的目标：

$('#object1').click(function(){
    if($(this).is('.ui-selected'))
    {
        $('#otherObject').addClass('newClass');
    }
});

请注意，您还需要将代码包装在DOMReady事件中，因此您的jQuery应该如下所示：

$(function() {  
    $('#object1').click(function(){
        if($(this).is('.ui-selected'))
        {
            $('#otherObject').addClass('newClass');
        }
    });
});

jsFiddle Demo

Answer 2

jQuery遍历应该有助于此。

$('#object1').click(function(){
 if ($('#selectable').children('.ui-selected').length >= 1){
     $('.ui-selected').next().addClass('newClass');
    }
});

Answer 3

只是想在 @BenM 的答案中添加一些（我认为更正）的想法。
（当然，没有任何个人信息，只有一些内容可以阅读您的评论）

一个小小的修正：

实际上，使用is（）而不是hasClass（）稍快一点。

您的示例： http://jsperf.com/hasclass-vs-is-stackoverflow/12
.hassClass()＆amp;之间的清洁比较.is()： http://jsperf.com/jquery-hasclass-vs-is

基于不同条件的测试无效。
在OP情况下， .is（）实际上要慢68％。

概念问题：

请注意，您需要 ...

.click()中没有需要来包装DOMready个事件。这是一个选项，是的，有效的，但不是唯一的。

jQuery函数需要，是对象已经呈现。

If .ready() is called after the DOM has been initialized, the new handler passed in will be executed immediately.
所以另一个有效的选择是将脚本放在之后呈现的HTML，例如，在文档的底部，在这种情况下，没有必要将其包装在.ready()函数中。

一个好习惯：

使用最新版本的jQuery或者推荐使用。

jsfiddle示例使用1.8.3版本。

从该版本到推荐的过时的功能，可能会导致编程错误。

最后，自我推销作为公认的答案，我根本不喜欢，但就像我说的那样......这只是我的观点。

检查是否div hasClass，如果是，然后addClass到另一个div

3 个答案:

一个小小的修正：

概念问题：

一个好习惯：