Show/Hide 函数

Question

这可能是一个非常愚蠢的问题，但我不熟悉 JavaScript。

我有两个不同的下拉菜单。如果您选择 "other" 选项，将出现一个文本框来编写您的请求。

当我为第一个菜单编码时，它起作用了。当我为第二个菜单编码时，只有第二个菜单有效，禁用了第一个菜单的 show/hide 功能。

  function showfield(name){
    if(name=='Other')document.getElementById('div1').style.display="block";
    else document.getElementById('div1').style.display="none";
  }
 
 function hidefield() {
 document.getElementById('div1').style.display='none';
 }

 function showfield(name){
    if(name=='Other')document.getElementById('div2').style.display="block";
    else document.getElementById('div2').style.display="none";
  }
 
 function hidefield() {
 document.getElementById('div2').style.display='none';
 }

 <body onload="hidefield()">
   <table>
     <tbody>
           <tr>
                        <td>
                        <select onchange="showfield(this.options[this.selectedIndex].value)">
                        <option value=" ">-- Please select --</option>
                        <option value="All">All</option>
                        <option value="Clipped">Clipped</option>
                        <option value="Per Post-It">Per Post-It</option>
                        <option value="Other">Other</option>
                        </select></td>
                    </tr>
                    <tr>
                        <td>
                        <div id="div1">Other: <input type="text" name="other" /></div>
                        </td>
                    </tr>
        <tr>
                        <td>
                        <select onchange="showfield(this.options[this.selectedIndex].value)">
                        <option value=" ">-- Please select --</option>
                        <option value="Binding Element">Binding Element</option>
                        <option value="Folder/Binder">Folder/Binder</option>
                        <option value="Tabs">Tabs</option>
                        <option value="Other">Other</option>
                        </select></td>
                    </tr>
                    <tr>
                        <td>
                        <div id="div2">Other: <input type="text" name="other" /></div>
                        </td>
                    </tr>
       </tbody>
     </table>
   </body>

Answer 1

当您声明一个变量（或函数）时，每个名称只能有一个函数。否则，最后定义的将覆盖其他的。在你的情况下，我要么更改第二组的名称，要么更改 showField 和 hideField 以采用另一个参数：id。对于第一个，传递 "other1"，对于第二个，传递 "other2"。您还应该将 other 字段重命名为不同的名称。

Answer 2

拥有 4 个不同的函数似乎有点不必要（并且非法 - 函数不能有重名）。您可以编写一个方法来处理隐藏和显示任何对象：

function showObject (obj) {
    obj.style.display = "";
}

function hideObject (obj) {
    obj.style.display = "none";
}

然后，当从对象调用方法时，您可以这样做： <...onchange="showfield(document.getElementById(this.options[this.selectedIndex].value));" .../>

当然，还有 jQuery 粉丝的解决方案：

function showObject (id) {
    $("#" + id).show();
}

function hideObject (id) {
    $("#" + id).hide();
}

在这种情况下，将传递元素的名称而不是元素本身： onchange="showfield(this.options[this.selectedIndex].value)" .../>

Answer 3

首先，你确实声明了函数 hidefield 两次，函数名称必须是唯一的，所以第二个函数应该有另一个名称。
第二件事是你没有显示 div1 的函数，因为你的 showfunction 只选择了 div div2

Answer 4

感谢您的帮助！

我将函数名称更改为唯一的，并在 body 标记的 onload 事件中添加了不同的函数。

function showfield(name) {
  if (name == 'Other') document.getElementById('div1').style.display = "block";
  else document.getElementById('div1').style.display = "none";
}

function hidefield() {
  document.getElementById('div1').style.display = 'none';
}

function showBreak(name) {
  if (name == 'Other') document.getElementById('div2').style.display = "block";
  else document.getElementById('div2').style.display = "none";
}

function hideBreak() {
  document.getElementById('div2').style.display = 'none';
}

<html>
    <head>
        <title>Job Ticket</title>
        
    </head>
    <body onload="hidefield(); showBreak();">
        <table class="webform" cellspacing="0" cellpadding="2" border="0">
            <tbody>
                <tr>
                    <td>
                    <p>Copying/Scanning</p>
                    </td>
                </tr>
                <tr>
                    <td>
                    <select onchange="showfield(this.options[this.selectedIndex].value)">
                    <option value=" ">-- Please select --</option>
                    <option value="All">All</option>
                    <option value="Clipped">Clipped</option>
                    <option value="Per Post-It">Per Post-It</option>
                    <option value="Other">Other</option>
                    </select>
                    </td>
                </tr>
                <tr>
                    <td>
                    <div id="div1">Other:
                    <input type="text" name="whatever" />
                    </div>
                    </td>
                </tr>
                <tr>
                    <td>
                    <p>Document Breaks</p>
                    </td>
                </tr>
                <tr>
                    <td>
                    <select onchange="showBreak(this.options[this.selectedIndex].value)">
                    <option value=" ">-- Please select --</option>
                    <option value="All">All</option>
                    <option value="Clipped">Clipped</option>
                    <option value="Per Post-It">Per Post-It</option>
                    <option value="Other">Other</option>
                    </select>
                    </td>
                </tr>
                <tr>
                    <td>
                    <div id="div2">Other:
                    <input type="text" name="whatever" />
                    </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

Show/Hide 函数

Show/Hide Function

javascript

show-hide