JavaScript-如何通过点击图片显示/隐藏tr textarea

Question

我有三个名为“down.png”的图像和三个 dropDownTextAreas。每次单击图像时，我都想单独显示/隐藏文本区域。

例如，如果点击第一张图片，第一个文本区域出现，点击第二张图片，第二个文本区域出现，等等。

但我的问题是每次单击其中一张图片时，所有文本区域都会显示出来。

非常感谢!

<script>
     function showHide(){
       var textArea = document.getElementsByClassName("dropDownTextArea");
         for(var i=0; i<textArea.length; i++){
       if(textArea[i].style.display == "none"){
         textArea[i].style.display="table-row";
       }else{
         textArea[i].style.display="none";
       }
    }
 }
</script>

<style>
.dropDownTextArea{
  display: none;
}
</style>

<table id="myTable" >
        <tr>
            <th></th>
            <th>STUDENT</th>
            <th>ADVISOR</th>
            <th>AWARD<br/>STATUS</th>
            <th>SEMESTER</th>
            <th>TYPE</th>
            <th>BUDGET<br />#</th>
            <th>PERCENTAGE</th>
        </tr>

        <tr>
            <td>
                <input type="checkbox" name="myCheckbox" /><br /><br />
                <img src="down.png" width="25px" onclick="showHide()"/>
            </td>
            <td>Student 1</td>
            <td>Teacher 1</td>
            <td>Approved</td>
            <td>Fall</td>
            <td>TA</td>
            <td>12345</td>
            <td>100%</td>
        </tr>
        <tr class="dropDownTextArea"><td id="myDropDown" colspan="8">
            Advisor:<br /><br />
            Award Details<br />
            Summer 1-2014(TA)<br />
            Budget Number: <img src="pencil.png"><br />
            Tuition Number: <img src="pencil.png"><br />
            Comments:<br /><br /><br />
            Award Status:<br /><br /><br />
        </td></tr>

        <tr>
            <td>
                <input type="checkbox" name="myCheckbox" /><br /><br />
                <img src="down.png" width="25px" onclick="showHide()"/>
            </td>
            <td>Student 2</td>
            <td>Teacher 2</td>
            <td>Approved</td>
            <td>Fall</td>
            <td>TA</td>
            <td>23456</td>
            <td>100%</td>
        </tr>
        <tr class="dropDownTextArea"><td id="myDropDown" colspan="8">
            Advisor:<br /><br />
            Award Details<br />
            Summer 1-2014(TA)<br />
            Budget Number: <img src="pencil.png" > <br />
            Tuition Number: <img src="pencil.png" ><br />
            Comments:<br /><br /><br />
            Award Status:<br /><br /><br />
        </td></tr>

        <tr>
            <td>
                <input type="checkbox" name="myCheckbox" "/><br /><br />
                <img src="down.png" width="25px" onclick="showHide()"/>
            </td>
            <td>Student 3</td>
            <td>Teacher 3</td>
            <td>Approved</td>
            <td>Fall</td>
            <td>TA</td>
            <td>34567</td>
            <td>100%</td>
        </tr>
        <tr class="dropDownTextArea" "><td id="myDropDown" colspan="8">
            Advisor:<br /><br />
            Award Details<br />
            Summer 1-2014(TA)<br />
            Budget Number: <img src="pencil.png"><br />
            Tuition Number: <img src="pencil.png"><br />
            Comments:<br /><br /><br />
            Award Status:<br /><br /><br />
        </td></tr>
    </table>

Answer 1

你必须绑定(bind)每个元素<img>作为onclick="showHide(this)"到函数 showHide(obj)

Properties and Methods DOM 元素对象

所以你的函数将是

  function showHide(obj) {
   var textArea = document.getElementsByClassName("dropDownTextArea");
   for (var i = 0; i < textArea.length; i++) {
     if (textArea[i].previousElementSibling.firstElementChild.children[3] == obj) {
       if (textArea[i].style.display == "table-row") {
         textArea[i].style.display = "none";
       } else {
         textArea[i].style.display = "table-row"
       }
     } else {
       textArea[i].style.display = "none";
     }


   }
 }

Fiddle Link for demo