javascript - 在 javascript 中按类显示隐藏标签(有和没有 JQuery)

Question

更新:再检查后working example ，我决定尝试使用 JQuery 方法。所以我相应地更新了代码。我确信有一种 3 行的方法可以得到我对 300 所做的事情。

前 3 个 anchor 有一个 javascript 函数显示 3 个文本:T1、T2 和 T3，每个按时间显示。最后 2 个 anchor 显示和隐藏标签类 ET(额外文本)。

<style type="text/css">
.active{color:red;}
.T2,.T3{display:none;}
</style>

<ul>
<li><a href="#" id="mary">Show Text 1</a> | <a href="#" id="sonya">Show Text 2</a> | <a href="#" id="katty">Show Text 3</a></li>
<li><a href="#" id="short">Hide Text 4</a> | <a href="#" id="long">Show Text 4</a></li>
</ul>

<h1><span class="T1">Hi, I am Mary</span><span class="T2">Hi, I am Sonya</span><span class="T3">Hi, I am Katty</span></h1>
<h2><span class="T1">I love apples</span><span class="T2">I love oranges</span><span class="T3">I love bannanas</span></h2>
<h3><span class="T1">And singing</span><span class="T2">And swimming</span><span class="T3">And walking</span></h3>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

<p><span class="ET">Vestibulum hendrerit justo eu leo.</span></p>

这是我在完全不了解 JQuery 的情况下所能想象的:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('#mary, #long').addClass('active');
    $('#mary').click(function(event){
        event.preventDefault();
        $('.T2, .T3').hide();
        $('.T1').show();
        $(this).addClass('active');
        $('#katty, #sonya').removeClass('active');
    });
    $('#sonya').click(function(event){
        event.preventDefault();
        $('.T1, .T3').hide();
        $('.T2').show();
        $(this).addClass('active');
        $('#mary, #katty').removeClass('active');
    });
    $('#katty').click(function(event){
        event.preventDefault();
        $('.T1, .T2').hide();
        $('.T3').show();
        $(this).addClass('active');
        $('#mary, #sonya').removeClass('active');
    });
    $('#short').click(function(event){
        event.preventDefault();
        $('.ET').hide();
        $(this).addClass('active');
        $('#long').removeClass('active');
    });
    $('#long').click(function(event){
        event.preventDefault();
        $('.ET').show();
        $(this).addClass('lumi');
        $('#short').removeClass('lumi');
    });
});
</script>

Answer 1

我真的不知道你的代码有什么问题，但我可以问一下你为什么要修改样式表吗？我的意思是..如果我要那样做，我会尝试一种不同的方法:不修改样式表，而是将新样式附加到元素。
问题是您可以拥有多个样式表，其中包含多个 css 声明的相同元素可以相互覆盖。在这种情况下，您的函数将不会有任何工作机会。
我会实现类似的东西:

function modifyDisplay(className,display){//display is a boolean indicating weather to display the class or to hide it  var el = document.getElementsByTagName('span');  for(var i=0,l=el.length;i<l;i++)    {      var classes = el.getAttribute('class').split(' ');      var hasClass = false;      for(var c in classes)        if(classes[c] == className)          {            el.style.display = display ? "inline" : "none";            hasClass = true;            break;          }      if(!hasClass)        el.style.display = !display ? "inline" : "none";    }}

然后你可以创建“快捷方式”来隐藏和显示:

var show = function(className){   return modifyDisplay(className,true);};var hide = function(className){   return modifyDisplay(className,false);};  

当然，如果您愿意深入了解 javascript 库的功能，那么在 jquery 中，所有这些都可以编写如下:

function show(className){  $('span').hide();  $('.'+className).show();}

哦，还有一件事，当你在全局范围内声明一个函数或变量(有或没有“var”关键字)时，它会自动附加到“window”对象。您无需明确地这样做。
对不起，如果我忘乎所以了；我希望这就是您要找的。