我在同一页面中有两个不同的注释列表,第一个使用ul,第二个使用dl

问题

我想在单击button时为两个元素同时上色

我不想创建一个新变量。我想知道是否可能像:

  var Comment = $(document).find("[data-href='post?s=" + id_comment + "']").closest("li.comment || dd.listed_comment");


使用OR左右



$(document).on("click", 'button', function(){
var id_comment =$(this).data("id_comment");
var Comment = $(document).find("[data-href='post?s=" + id_comment + "']").closest("li.comment");

Comment.css("background","red");
});

li,dd{border:1px solid blue;margin:5px 0;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>


<ul class="comments">
 <li class="comment"><div data-href='post?s=16'>Comment</div></li>
 <li class="comment"><div data-href='post?s=25'>Comment</div></li>
 <li class="comment"><div data-href='post?s=26'>Comment</div></li>
</ul>

<dl class="listed_comments">
<dd class="listed_comment"><div data-href='post?s=25'>Comment</div></dd>
 <dd class="listed_comment"><div data-href='post?s=24'>Comment</div></dd>
</dl>

<button data-id_comment="25">Color red</button>

最佳答案

jQuery允许使用CSS选择器。 CSS的一部分是使用多个选择器,以逗号分隔。这样一来,您可以轻松选择一个或另一个。



$(document).on("click", 'button', function(){
var id_comment =$(this).data("id_comment");
var Comment = $(document).find("[data-href='post?s=" + id_comment + "']").closest("li.comment, dd.listed_comment");

Comment.css("background","red");
});

li,dd{border:1px solid blue;margin:5px 0;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>


<ul class="comments">
 <li class="comment"><div data-href='post?s=16'>Comment</div></li>
 <li class="comment"><div data-href='post?s=25'>Comment</div></li>
 <li class="comment"><div data-href='post?s=26'>Comment</div></li>
</ul>

<dl class="listed_comments">
<dd class="listed_comment"><div data-href='post?s=25'>Comment</div></dd>
 <dd class="listed_comment"><div data-href='post?s=24'>Comment</div></dd>
</dl>

<button data-id_comment="25">Color red</button>





当然,最简单的方法是在两个元素之间使用一个通用类(例如“ comment-container”)。

09-10 03:00
查看更多