javascript - 使用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 中的最后一个 li 时，p 将显示设置为 none，#suggestion_input 将显示为内联 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，我认为它反射(reflect)了链接中的答案，只是它不是函数。

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/

所以现在当你点击 suggestions 时，from 会出现，如果你点击事件，段落会回来，from 会消失