我在同一页面中有两个不同的注释列表,第一个使用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”)。