[英]How to combine different css class selectors into one javascript line?
这段代码如何简化为一行(js语句)?
<script>$(".div2").click(function() {window.location = $(this).find("a").attr("href"); return false;});</script>
<script>$(".div3").click(function() {window.location = $(this).find("a").attr("href"); return false;});</script>
<script>$(".div4").click(function() {window.location = $(this).find("a").attr("href"); return false;});</script>
<script>$(".div5").click(function() {window.location = $(this).find("a").attr("href"); return false;});</script>
<script>$(".div6").click(function() {window.location = $(this).find("a").attr("href"); return false;});</script>
<script>$(".div7").click(function() {window.location = $(this).find("a").attr("href"); return false;});</script>
<script>$(".div8").click(function() {window.location = $(this).find("a").attr("href"); return false;});</script>
<script>$(".div9").click(function() {window.location = $(this).find("a").attr("href"); return false;});</script>
您可以将其缩短为以下内容:
$(".div2,.div3,.div4,.div5,.div6,.div7,.div8,.div9").click(function() {
window.location = $(this).find("a").attr("href");
return false;
});
也不需要使用多个<script>
标签,1 就足够了。
两个答案:
您可以使用选择器组:
$(".div2, .div3, .div4, .div5, .div6, .div7, .div8, .div9")..click(function() {
window.location = $(this).find("a").attr("href");
return false;
});
选择器组是一系列中间有逗号的选择器。 它选择与组中任何选择器匹配的元素。
您可以向document
中添加一个处理程序,而不是向所有这些 div 添加一个处理程序,该处理程序仅在单击通过这些 div 之一时才会执行:
$(document).on("click", ".div2, .div3, .div4, .div5, .div6, .div7, .div8, .div9", function() {
window.location = $(this).find("a").attr("href");
return false;
});
即使您有多个语句,也没有理由不能将它们放在一个script
中:
<script>
doThis();
doThat();
doTheOther();
</script>
给元素添加一个普通的class,如下。
<div class="div2 my-class"> ... </div>
<div class="div3 my-class"> ... </div>
<div class="div3 my-class"> ... </div>
<div class="div4 my-class"> ... </div>
<div class="div5 my-class"> ... </div>
<div class="div6 my-class"> ... </div>
<div class="div7 my-class"> ... </div>
<div class="div8 my-class"> ... </div>
将事件侦听器添加到该公共 class
$(".my-class").click(function() {
window.location = $(this).find("a").attr("href");
return false;
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.