JQuery 不是我的头号语言,所以我会做必要的事情来完成工作。但是,我创建了一个怪物,想知道是否有更简洁的方法来执行以下操作:
我有一系列如下所示的 div:
<div class="competency_keys key_1" title="" id="tog1"></div>
<div class="competency_keys key_2" title="" id="tog2"></div>
<div class="competency_keys key_3" title="" id="tog3"></div>
ID 从 tog1 运行到 tog8,当你点击其中一个时,它会改变其余的 css,如下所示:
$("#tog1").click(function(){
$(".overall").fadeIn().css("display", "block");
$(".score1").css("display", "none");
$(".score2").css("display", "none");
$(".score3").css("display", "none");
$(".score4").css("display", "none");
$(".score5").css("display", "none");
$(".score6").css("display", "none");
$(".score7").css("display", "none");
$(".score8").css("display", "none");
$(".score9").css("display", "none");
$(".key_1").css("opacity", "1");
$(".key_2").css("opacity", "0.2");
$(".key_3").css("opacity", "0.2");
$(".key_4").css("opacity", "0.2");
$(".key_5").css("opacity", "0.2");
$(".key_6").css("opacity", "0.2");
$(".key_7").css("opacity", "0.2");
$(".key_8").css("opacity", "0.2");
$(".key_9").css("opacity", "0.2");
document.getElementById('ocsTitle').innerHTML = 'Overall Competency Score';
});
我有 8 个这样的代码块 - 它确实有效,但代码量很大。必须有更清洁的解决方案吗?
最佳答案
您可以通过以下两种方式解决此问题:
链接选择器
就像我在您的评论中提到的,您可以 chain selectors in jQuery.您的代码可能如下所示:
$("#tog1").click(function(){
$(".overall").fadeIn().css("display", "block");
$(".score1", ".score2", ".score3", ".score4", ".score5", ".score6", ".score7", ".score8", ".score9").hide();
$(".key_1").css("opacity", "1");
$(".key_2", ".key_3", ".key_4", ".key_5", ".key_6", ".key_7", ".key_8", ".key_9").css("opacity", "0.2");
document.getElementById('ocsTitle').innerHTML = 'Overall Competency Score';
});
这仍然有点困惑,并且没有很好地利用 CSS 和类。 (顺便说一句,.hide()
与 jQuery 中的 .css("display", "none")
是一样的)。
使用类
更好的方法是利用类。您必须向您的元素添加一两个类,但这样会更简洁。例如,您的代码可能如下所示:
$("#tog1").click(function(){
$(".overall").fadeIn().css("display", "block");
$(".score").hide();
$(".key_1").css("opacity", "1");
$(".competency_keys").css("opacity", "0.2");
document.getElementById('ocsTitle').innerHTML = 'Overall Competency Score';
});
您似乎混淆了类和 ID。类适用于多个元素,而 ID 适用于单个元素。因为你有一堆“分数”元素和一堆“关键”元素,它们的行为方式相对相同,所以它们应该与类一起分组。可以找到有关类与 ID 的更多信息 here.
关于jquery - jquery .click 和 .css 的清洁方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42540357/