jquery - jquery .click 和 .css 的清洁方法

Question

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 个这样的代码块 - 它确实有效，但代码量很大。必须有更清洁的解决方案吗？

Answer 1

您可以通过以下两种方式解决此问题:

链接选择器

就像我在您的评论中提到的，您可以 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.