Question

我正在尝试轻松隐藏和显示与HTML代码分离的脚本。但我无法让它发挥作用。任何人？ HTML：

    <body>
        <div id="area">
            <h1>JavaScript</h1>
            <button class="button">Click!</button>
            <p class="text">Adöfkljg ldjfögj jsdflkgjh kjddflkgjh dfgkjdöjg </p>
            <button class="button">Click!!</button>
            <p class="text">dfghödifgjöoeirugeöori dijfoidj oidoi odi!</p>
        </div>
        <script src="visa.js"></script>
    </body>

JS：

var text = document.getElementsByClassName("text");
var butt = document.getElementsByClassName("button");

window.onload = start();
function start(){
    for (i=0; i<text.length; i++){
        text[i].style.visibility = "hidden";
    };

};

butt[i].onclick = function (){
        if (text[i].style.visibility = "hidden"){
            text[i].style.visibility = "visible";
        }else{
            text[i].style.visibility = "hidden"
        };

    };

小提琴：http://jsfiddle.net/ZskCk/

Answer 1

您的代码存在一些问题：

if (text[i].style.visibility = "hidden")始终为真，它应该是：

if (text[i].style.visibility == "hidden")

以下代码：

butt[i].onclick = function (){
  if (text[i].style.visibility = "hidden"){
    text[i].style.visibility = "visible";
  } else {
    text[i].style.visibility = "hidden"
  };
};

不在for循环中，因此未定义i，并且当您进入该函数时（将来只需点击一次），i将不会被定义。所以，我将事件监听器移动到了按钮声明。

我已修复问题并updated your fiddle

基本上，您可以查看并将新代码与原始代码进行比较。

Answer 2

您似乎开始使用Javascript和HTML进行编码。在这种情况下，我建议你看一下jQuery作为DOM操作的可靠框架。使用jQuery回答你的问题：

$(function(){
    $('.text').hide();    
    $('button').click(function(){
        $(this).next('.text').toggle()
    });
});

工作jsfiddle：http://jsfiddle.net/yLju5/1/

使用DOM隐藏和显示

2 个答案: