Question

我需要一个javascrit函数，它在HTML文档中显示/隐藏具有特定类（t1，t2或t3）的所有span标记。例如：

<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>

函数sh（show hide）可能会像这样被触发：

<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>

一个重要的细节是，当span类t1可见时，所有其他span类t2和t3都被隐藏。默认设置是在第一次加载时显示所有span类t1。

非常感谢。

人们已经得到了我需要的东西。有两种解决方案：

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

在JQuery的帮助下： http://jsfiddle.net/v3vWM/3/

Answer 1

由于并非所有浏览器都支持所有方法（例如IE不支持getElementsByClassName，我建议使用类似jQuery的库，这样可以非常轻松地进行跨浏览器DOM访问。

但幸运的是，getElementsByTagName是supported by all browsers，所以你可以这样做：

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

我不知道您要隐藏或显示哪些跨度，所以我假设您要切换一个组的可见性。如果您要像我一样只获得一次span元素，那么您必须将脚本放在内容之后（在结束<body>标记之前）。否则，将找不到span元素。

DEMO

如果支持，使用document.querySelectorAll可能会更好。你可以这样做：

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);
                }
            }
       };
    } 
}());

检查是否支持querySelectorAll会创建适当的sh函数。

DEMO 2

Answer 2

jQuery解决方案：http://jsfiddle.net/tEUYC/

更新了解决方案：http://jsfiddle.net/tEUYC/1/

再次更新：http://jsfiddle.net/tEUYC/2/

Answer 3

您可以直接在javascript中修改样式定义。它有点乱，你应该在不同的浏览器上检查它，但它看起来像这样：

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

然后你可以使用类似的东西：

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

更改样式的定义。这将反映使用css类“t1”的所有元素。

另一方面，使用jQuery，您只需要一行代码： - ）

Answer 4

我建议jQuery。您可以在一行代码中执行此操作：

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

对于你的情况，听起来你也想看看jQueryUI中的“accordion”小部件。

Answer 5

JQuery更简单，使用的代码更少。从这里下载Jquery并包含在您的项目中http://docs.jquery.com/Downloading_jQuery

如何使用Java Script显示/隐藏具有相同类的所有标记？

5 个答案: