Question

我有三张图片叫＆＃34; down.png＆＃34;和三个dropDownTextAreas。每次单击图像时，我都希望单独显示/隐藏textarea。

例如，如果点击第一张图片，第一张textarea显示，点击第二张图片，第二张textarea显示等等。

但我的问题是每当我点击其中一张图片时，所有textareas都会显示出来。

非常感谢！

<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

所有这些都显示的原因是因为您在javascript中选择了所有这些内容。这一行var textArea = document.getElementsByClassName("dropDownTextArea");选择该类的所有元素，然后继续显示所有元素。

您需要为每个下拉文字区域分别设置id或class，以便您可以单独选择它们。以下是您可以采取的潜在方法。

<script>
  function showHide(dropdown){
    var textArea = document.getElementById(dropdown)
    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('dropdown_one')"/>
            </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" id="dropdown_one"><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('dropdown_two')"/>
            </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" id="dropdown_two"><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('dropdown_three')"/>
            </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" id="dropdown_three"><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 2

您必须将每个元素<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

JavaScript-如何通过单击图像显示/隐藏tr textarea

2 个答案: