使用javascript更改显示

Question

所以我查看了其他问题，并找到了在此链接上选择的答案：

Toggle (show/hide) element with javascript

以下是用于更改显示的答案的以下功能。

function toggle(id) {
var element = document.getElementById(id);

  if (element) {
    var display = element.style.display;

    if (display == "none") {
        element.style.display = "block";
    } else {
        element.style.display = "none";
    }
  }
}

我在我的代码中尝试过，但它不起作用。我在末尾或这篇文章中附上了 JSFiddle 的链接。

我有一个父 div，其 id 为#activities。它包含多个孩子，但重要的是 li、p 和 div，它们的 id 为#suggestion_input。下面是 HTML。

HTML

<div id="activities" class="info_container">
        <h1>Our Activities</h1>
        <div class="contain">
            <ul>  
                <li>Activity 1</li>
                <li>Activity 2</li>
                <li>Activity 3 </li>
                <li>Activity 4 </li>
                <li>Activity 5</li>
                <li>Activity 6 </li>
                <li>Activity 7</li>
                <li>Your Suggestions</li>
            </ul>
            <p> 
                Bacon ipsum dolor sit amet ribeye tenderloin meatball, chuck andouille beef ribs jerky ...
            </p>
            <div id="suggestion_input">
                <label for="name" >Your Name</label>
                <input type="text" id="name" name="name">
                <label for="email">Email</label>
                <input type="email" id="email" name="email">
                <label for="suggestions">Suggestions</label>
                <textarea id="suggestions" name="suggestions" rows="39"></textarea>
            </div>

当用户单击 ul 中名为“Your Suggestions”的最后一个 li 时，p 将显示设置为无，#suggestion_input 将显示内联块。目前，他们的 css 分别设置为 inline-block 和 none。

CSS

 #activities p{
 display:inline-block;
 width:500px;
 vertical-align:top;
 margin-top:20px;
 margin-left:20px;
 background:#FFFDA1;
 }

 #suggestion_input{
 display:none;
 margin-left:150px;
 vertical-align:top;
 margin-top:20px;
 text-align:center;
  }

然后这是我的 javascript，我认为它反映了链接中的答案，只是它不是一个函数。

Javascript - 此代码是 addEventListener 的一部分。事件是“点击”。

 if(e.target.innerText === 'Your Suggestions'){

            var para = document.getElementById('activities').querySelector('p');
            var display = para.style.display;
            /* if you uncomment this, then the following code will work
            outside of the if display == 'inline-block' condition

            para.style.display = 'none';
            suggestion_input.style.display = 'inline-block';

            */

            if(display == 'inline-block'){
                // This code will not work
                para.style.display = 'none';
                suggestion_input.style.display = 'inline-block';
                console.log('works');
            }
        }else{
            if(display == 'none'){
                display = "inline-block";
            }
        }
    } 

当我点击时，什么也没有发生。是不是因为"display == 'none'"的if语句中的条件导致的错误？

这里是 JSfiddle：http://jsfiddle.net/a4t7w/1/

Answer 1

你的js有几个错误，我在评论中列出了，一共4个

document.getElementById('activities').addEventListener("click",function(e){

    // SKIP THIS CODE, THE ERROR LIES BELOW

        // 1. put the var outside of the if/else 
        var para = document.getElementById('activities').querySelector('p');
        var display = para.style.display;

        // THIS WAS WHERE THE ERROR OCCURS           
        if(e.target.innerText === 'Your Suggestions'){

            if(display = 'inline-block'){   // 2. it should be "=" instead of "=="
                para.style.display = 'none';
                suggestion_input.style.display = 'inline-block';
                console.log('works');
            }
        }else{
            if(display = 'none'){
                suggestion_input.style.display = 'none';    // 3. add in suggestion display none
                para.style.display = 'inline-block';    // 4. "para.style.display" instead of "display"
            }
        }
    } 
});

一个工作演示：http://jsfiddle.net/a4t7w/7/

所以现在当你点击建议时，从出现，而不是如果你点击活动，段落回来，从消失

Answer 2

好的，首先，您的部分问题在于您的样式表中设置了para.style.display 等于inline-block like。不幸的是，在这种用法中，Javascript 正在访问您使用元素本身定义的 内联样式，而 不是 您使用外部 CSS 定义的内容。

所以这个语句：if(display == 'inline-block') 永远不会返回true，因为display 实际上设置为""。如果您还没有，请熟悉Firebug for Firefox。帮助调试这类东西确实很神奇。

另一件事在这里：if(e.target.innerText === 'Your Suggestions')。你应该使用innerHTML 或textContent 而不是innerText。 innerText 属性是 IE 的东西。

现在，来解决您的问题！我看到您将单击事件附加到包含您的 <ul> 元素的 <div> 元素。如果您只需要在“建议”<li> 上运行此单击事件，那么我建议您在附加侦听器时隔离该特定元素。

更改您的 HTML 和 JS：

<li id="suggestionToggle">Your Suggestions</li>
...
document.getElementById('suggestionToggle').addEventListener("click",function(e) ... 

接下来，您可以重写您的 Javascript 以测试在 <p> 元素上设置样式时是否存在 "" 或 inline-block。这是您的代码的更新版本：

document.getElementById('activities').addEventListener("click",function(e)
{
    var suggestion_input = document.getElementById('suggestion_input');
    var para = document.getElementById('activities').querySelector('p');
    var light_green = document.getElementById('activities').querySelector('.light_green');      


if(light_green){
    light_green.style.backgroundColor="red";
    light_green.className = "";
    e.target.style.backgroundColor = '#0DFFB9';
    e.target.className = 'light_green';
} else {
    e.target.style.backgroundColor = '#0DFFB9';
    e.target.className = 'light_green';
}

if(e.target.innerHTML == 'Your Suggestions') {       
    var display = para.style.display;           

    if(display == 'inline-block' || display == "") {
        // This code will not work ** It will now! **
        para.style.display = 'none';
        suggestion_input.style.display = 'inline-block';
    } else {
        if(display != "inline-block") {
            para.style.display = "inline-block";
            suggestion_input.style.display = "none";
        }
    }
} else {        
    para.style.display = "inline-block";
    suggestion_input.style.display = "none";
}

});

JS Fiddle 在这里查看切换操作：http://jsfiddle.net/RyUz5/8/

希望有帮助！

编辑：启用了正确的切换，正如 yancie 所指出的那样，我不小心去掉了。

Answer 3

仔细阅读这一行：

/* 
if you uncomment this, then the following code will work
 outside of the if display == 'inline-block' condition

para.style.display = 'none';
suggestion_input.style.display = 'inline-block';

*/

现在您所要做的就是取消注释这一行：

para.style.display = 'none';
suggestion_input.style.display = 'inline-block';