How to show / hide all tags with the same class with Java Script?_问答_开发者

I need a javascrit function that shows/hides all span tags with a specific class (t1, t2 or t3) in a HTML document. Example:

<script type="text/javascript">
<!--
    function sh(t){//show_hide(text number class)
       //???
    }
//-->
</script>

<div id='C'>
 <p>
  <span class="P">
   Normal allways visible text. 
   <span class="t1">Text 1</span> 
   <span class="t2">Text 2</span> 
   <span class="t3">Text 3</span> 
   Normal allways visible text.
  </span>
 </p>
 <p>
  <span class="P">
   Normal allways visible text. 
   <span class="t1">Text 1</span> 
   <span class="t2">Text 2</span> 
   <span class="t3">Text 3</span> 
   Normal (allways visible text.
  </span>
 </p>
 <p><span>Normal allways visible text.</span></p>
</div>

The function sh (show hide) could be trigerred like this:

<p>Show: <a href="#" onclick="sh('t1');">text 1</a> | <a href="#" onclick="sh(t2);">text 2</a> | <a href="#" onclick="sh(t3);">text 3</a></p>

An important detail is that when the span class t1 is visible, all other span class t2 and t3 are开发者_开发问答 hidden. The default is to have all span class t1 visible at the first load.

Thanks a lot.

The folks have already got what I needed. There are two solutions:

Pure Javascript: http://jsfiddle.net/4DREQ/

With the help of JQuery: http://jsfiddle.net/v3vWM/3/

As not all browsers support the all methods (e.g. IE does not support getElementsByClassName, I suggest to use a library like jQuery that makes cross-browser DOM access very easy.

But luckily, getElementsByTagName is supported by all browsers, so you could do:

var spans = document.getElementsByTagName('span');

function sh(cls) {
    for (var i = spans.length; i--;) {
        var element = spans[i];
        if (element.className.match(RegExp('\\b' + cls + '\\b'))) {
            element.style.display = (element.style.display === 'none') ? '' : 'none';
        }
    }
}

I don't know which spans you want to hide or show, so I just assume you are going to toggle the visibility of one group. If you are going to get the span elements only once like I did, then you have to put the script after the content (before the closing <body> tag). Otherwise the span element won't be found.

DEMO

If supported, using document.querySelectorAll might be even better. You could do:

window.sh = (function() {
    function toggleVisibility(element) {
        element.style.display = (element.style.display === 'none') ? '' : 'none';
    }

    if(typeof document.querySelectorAll === 'function') {
        return function(cls) {
            var spans = document.querySelectorAll('span.' + cls);
            for (var i = spans.length; i--;) {
                toggleVisibility(spans[i]);
            }
        };
    }
    else {
        var spans = document.getElementsByTagName('span');
        return function(cls) {
            for (var i = spans.length; i--;) {
                var element = spans[i];
                if (element.className.match(RegExp('\\b' + cls + '\\b'))) {
                    toggleVisibility(element);
                }
            }
       };
    } 
}());

This checks once whether querySelectorAll is supported creates an appropriate sh function.

DEMO 2

You can modify the style definitions directly in javascript. It is a bit messy and you should check it on different browsers but it would look like this:

function findRule(selectorText)
{
    for(var i=0; i<document.styleSheets.length; i++)
    {
        // IE uses "rules", all other browsers use "cssRules".
        var rules = document.styleSheets[i].cssRules || document.styleSheets[i].rules;

        for(var j=0; j<rules.length; j++)
        {
            if(rules[j].selectorText == selectorText)
                return rules[j];
        }
    }
}

And then you can use something like:

findRule(".t1").style.backgroundColor = "Blue";

to change the definition of the style. This will reflect on all elements that use the css class "t1".

On the other hand, with jQuery you need only one line of code :-)

jQuery solution: http://jsfiddle.net/tEUYC/

Updated solution: http://jsfiddle.net/tEUYC/1/

Updated again: http://jsfiddle.net/tEUYC/2/

I recommend jQuery. You can do this in a single line of code:

$(".t1").hide();

For your case it sounds like you also want to take a look at the "accordion" widget in jQueryUI.

JQuery is simpler and uses less code. Download Jquery from here and include in your project http://docs.jquery.com/Downloading_jQuery

How to show / hide all tags with the same class with Java Script?

精彩评论

关注公众号

热门标签

图文推荐

How to show / hide all tags with the same class with Java Script?

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：