jQuery否则会以错误的顺序应用错误的类

Question

我正在尝试构建一个查找特定类的脚本，如果该类存在，则会发生某些情况。 例如，如果我在页面上找到类“ active-01”，则脚本在“ active 1”上运行，如果类“ active-02”在页面上，则在脚本“ active-02”上运行。

我的脚本是

if($("*").hasClass("active-01")){
            $(".active-01").addClass("showText").removeClass("active-01");
            $(".showText").css(
                {
                "background":"pink",
                "border":"1px solid red",
                "font-size":"1rem"
                }
            )            
        } else {
            $(".showText").addClass("active-01").removeClass("showText").removeAttr("style");            
        }
        if($("*").hasClass("active-02")){
            $(".active-02").addClass("showText").removeClass("active-02");
            $(".Text").css(
                {
                "background":"pink",
                "border":"1px solid red",
                "font-size":"1rem"
                }
            )            
        } else {
            $(".showText").addClass("active-02").removeClass("showText").removeAttr("style");            
        }

“ active-01”和“ active-02”类不会同时出现在任何页面上。

问题是，当我在使用“ active-01”类的页面上运行脚本时，该脚本无法正常运行：

第一次运行脚本会删除类“ active-01”（正确），但不会添加类“ showText”。相反，它添加了“ active-02”类。

我第二次运行脚本：  （正确）。

在最后一次插入类“ active-01”，删除样式属性和类“ showText被删除”时运行脚本（正确）。

这应该发生：

点击1： 如果存在“ active-01”类：     添加类“ showText”     删除类“ active-01”     为“ active-01”类添加样式。 点击2：     添加原始类“ active-01”     删除插入的类“ showText”     删除属性样式。

我希望我已经对此做了足够的解释，以便有人帮助我。

Answer 1

  

第一次运行脚本会删除类“ active-01”（正确），但不会添加类“ showText” 。相反，它添加了“ active-02”类。

是的。

第一个if语句的主体运行，因为存在一个元素为active-01类的元素。它删除该类，并将其替换为showText。然后，紧随其后，检查第二个if语句。该条件为假，因此运行else块的主体，从而删除showText并添加active-02。

如果稍微缩进一点，可能会更容易理解：

if ($("*").hasClass("active-01")) {
    // This part runs
    $(".active-01").addClass("showText").removeClass("active-01");
    $(".showText").css({
        "background": "pink",
        "border": "1px solid red",
        "font-size": "1rem"
    })
} else {
    // This doesn't run
    $(".showText").addClass("active-01").removeClass("showText").removeAttr("style");
}
if ($("*").hasClass("active-02")) {
    // This doesn't run
    $(".active-02").addClass("showText").removeClass("active-02");
    $(".Text").css({
        "background": "pink",
        "border": "1px solid red",
        "font-size": "1rem"
    })
} else {
    // This part runs
    $(".showText").addClass("active-02").removeClass("showText").removeAttr("style");
}

Answer 2

谢谢大家。我去想了一下我的错误逻辑。还要感谢所有建议，我有一个可以正常运行的脚本。

( function( $ ) {
    "use strict";   
    var srt1 = $('.sr-only').length;
    var myDiv1 = document.createElement('div');
        myDiv1.className = "how-many-srts";
        myDiv1.innerHTML = "There are " + srt1 + " possible uses of screen reader only text in use";
          if (document.body){
          document.body.appendChild(myDiv1);
        }
        if(srt1){
            $(".sr-only").addClass("showoffScreenText-01").removeClass("sr-only");
        } else {
            $(".showoffScreenText-01").addClass("sr-only").removeClass("showoffScreenText-01");
            $(".how-many-srts").remove();              
        }
    var srt2 = $(".ui-helper-hidden-accessible").length;
    var myDiv2 = document.createElement('div');
        myDiv2.className = "how-many-srts";
        myDiv2.innerHTML = "There are " + srt2 + " possible uses of screen reader only text in use";
          if (document.body){
          document.body.appendChild(myDiv2);
        }
        if(srt2){
            $(".offscreen").addClass("showoffScreenText-02").removeClass("offscreen");           
        } else {
            $(".showoffScreenText-02").addClass("offscreen").removeClass("showoffScreenText-02");
            $(".how-many-srts").remove();        
        }
    var srt3 = $(".ui-helper-hidden-accessible").length;
    var myDiv3 = document.createElement('div');
        myDiv3.className = "how-many-srts";
        myDiv3.innerHTML = "There are " + srt3 + " possible uses of screen reader only text in use";
          if (document.body){
          document.body.appendChild(myDiv3);
        }
        if(srt3){
            $(".offscreenText").addClass("showoffScreenText-03").removeClass("offscreenText");          
        } else {
            $(".showoffScreenText-03").addClass("offscreen").removeClass("showoffScreenText-03");
            $(".how-many-srts").remove();     
        }
    var srt4 = $(".ui-helper-hidden-accessible").length;
    var myDiv4 = document.createElement('div');
        myDiv4.className = "how-many-srts";
        myDiv4.innerHTML = "There are " + srt4 + " possible uses of screen reader only text in use";
          if (document.body){
          document.body.appendChild(myDiv4);
        }
        if(srt4){
            $(".ui-helper-hidden-accessible").addClass("showoffScreenText-04").removeClass("ui-helper-hidden-accessible");        
        } else {
            $(".showoffScreenText-04").addClass("ui-helper-hidden-accessible").removeClass("showoffScreenText-04");
            $(".how-many-srts").remove();  
        }
    var srt5 = $('.ms-accessible').length;
    var myDiv5 = document.createElement('div');
        myDiv5.className = "how-many-srts";
        myDiv5.innerHTML = "There are " + srt5 + " possible uses of screen reader only text in use";
          if (document.body){
          document.body.appendChild(myDiv5);
        }
        if(srt5){
            $(".ms-accessible").addClass("showoffScreenText-05").removeClass("ms-accessible");           
        } else {
            $(".showoffScreenText-05").addClass("ms-accessible").removeClass("showoffScreenText-05");
            $(".how-many-srts").remove();           
        }
    var srt6 = $('.off-screen').length;
    var myDiv6 = document.createElement('div');
        myDiv6.className = "how-many-srts";
        myDiv6.innerHTML = "There are " + srt6 + " possible uses of screen reader only text in use";
          if (document.body){
          document.body.appendChild(myDiv6);
        }
        if(srt6){
            $(".off-screen").addClass("showoffScreenText-06").removeClass("off-screen");           
        } else {
            $(".showoffScreenText-06").addClass("off-screen").removeClass("showoffScreenText-06");
            $(".how-many-srts").remove();          
        }
    var srt7 = $('.accessibility').length;
    var myDiv7 = document.createElement('div');
        myDiv7.className = "how-many-srts";
        myDiv7.innerHTML = "There are " + srt7 + " possible uses of screen reader only text in use";
          if (document.body){
          document.body.appendChild(myDiv7);
        }
        if(srt7){
            $(".accessibility").addClass("showoffScreenText-07").removeClass("accessibility");           
        } else {
            $(".showoffScreenText-07").addClass("accessibility").removeClass("showoffScreenText-07");
            $(".how-many-srts").remove();          
        }
    var srt8 = $('.accessible-module-heading').length;
    var myDiv8 = document.createElement('div');
        myDiv8.className = "how-many-srts";
        myDiv8.innerHTML = "There are " + srt8 + " possible uses of screen reader only text in use";
          if (document.body){
          document.body.appendChild(myDiv8);
        }
        if(srt8){
            $(".accessible-module-heading").addClass("showoffScreenText-08").removeClass("accessible-module-heading");           
        } else {
            $(".showoffScreenText-08").addClass("accessible-module-heading").removeClass("showoffScreenText-08");
            $(".how-many-srts").remove();         
        }
} )( jQuery );

好吧，我知道我可以改善这一点，最终我真的很想用JavaScript（而不是jQuery）进行编码。但是，现在这超出了我的技能范围。

如果任何人都对可访问性感兴趣，则其目的是进行实验性扩展，以可视方式显示开发人员有时包括的屏幕外文本。 请记住，这是一个想法，并且是实验性的

Chrome扩展程序 https://chrome.google.com/webstore/detail/show-screen-reader-text/fbfkajlfifmdaaagijbanghjmleigkee

Firefox扩展 https://addons.mozilla.org/en-US/firefox/addon/show-screen-reader-text/

显示此功能的网站：

澳大利亚ABC电视网页 https://www.abc.net.au/tv/