使用 javascript 更改显示

Question

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

使用 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 的链接。

我有一个id为#activities 的父div。它包含多个子项，但重要的是li、p和div，它们的 id 为#suggestion_input。下面是 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将显示设置为 none，#suggestion_input 将显示 inline-block。目前，它们的 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";
            }
        }
    } 

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

这是 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.displayequals like 。inline-block不幸的是，在这种用法中，Javascript 正在访问元素本身定义的内联样式，而不是使用外部 CSS 定义的样式。

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

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

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

更改您的 HTML 和 JS：

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

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

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 所说。