在javascript中显示按类隐藏标记（使用和不使用JQuery）

UPADTED: After examining another working example, I decided to try a JQuery aproach. So I updated the code accordingly. I am sure there is a 3 lines way to get what I did with 300.

UPADTED:在研究了另一个工作示例后,我决定尝试一个JQuery方法。所以我相应地更新了代码。我相信有一条3行的方法来获得我用300做的东西。

The first 3 anchors has a javascript functions that shows 3 texts: T1, T2 and T3, each one by time. The last 2 anchors shows and hides the tag class ET (extra text).

前3个锚点有一个javascript函数,显示3个文本:T1,T2和T3,每个都是时间。最后2个锚点显示和隐藏标记类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>

This is what I could picture without knowing JQuery at all:

这是我在不知道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>

2 个解决方案

#1

I can't really seem to know what's wrong in your code, but may i ask why are you modifying the stylesheet? I mean ..if i were to do that, i would try a different approach : do not modify the stylesheet, but attach new styles to the element.
The thing is that you can have multiple stylsheets with multiple css declarations for the same element(s) that can overwrite each other. In that case, your functions won't have the tiniest chance of working.
I would implement something like :

我似乎真的不知道你的代码有什么问题,但我可以问你为什么要修改样式表?我的意思是..如果我这样做,我会尝试不同的方法:不要修改样式表,而是将新样式附加到元素。问题是你可以拥有多个样式表,这些样式表具有多个可以相互覆盖的相同元素的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";
    }
}

and then you could create "shortcuts" to hide & show :

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

And, of course if you are willing to take a peak at what javascript libs can do, in jquery all this could be written as following :

而且,当然如果你愿意在javascript库可以做的事情上达到顶峰,那么在jquery中所有这些都可以写成如下:

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

Oh, and another thing, when you declare a function or a variable (with or without the "var" keyword) in a globals scope, it will automatically be attached to the "window" object. There is no need for you to explicitly do so.
Sorry if i got carried away; I hope that this was what you were looking for.

哦,另一件事,当你在全局范围内声明一个函数或变量(带或不带“var”关键字)时,它会自动附加到“window”对象。您无需明确这样做。对不起,如果我被带走了;我希望这就是你要找的东西。

#2

It looks like you're attempting to prototype the Javascript Window object with some new functions, which I don't think is possible. Just define them as functions and you should get better results.

看起来你正试图用一些新函数来构建Javascript Window对象的原型,我认为这是不可能的。只需将它们定义为函数,您就可以获得更好的结果。

#1

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";
    }
}