使用JavaScript的HTML表單顯示/隱藏選項

我正在嘗試使用 JavaScript 在 HTML 表單中顯示/隱藏特定的高級欄位。我正在使用Hide/show advanced option using JavaScript中的示例，它看起來運行良好，并且我能夠隱藏標有正確 div ID 的輸入。但是，我的每個輸入都使用自己的 div（如果可能的話，我想保持這種方式），這會導致 JS 播放。

HTML：

    <div class="u-form-group u-form-partition-factor-2 u-label-top u-form-group-5">
      <label for="text-c578" class="u-custom-font u-heading-font u-label u-text-body-alt-color u-label-5">Template Frequency (seconds)</label>
      <input type="text" placeholder="Template Frequency" id="text-c578" name="number-1" class="u-border-1 u-border-custom-color-1 u-custom-font u-heading-font u-input u-input-rectangle u-radius-50 u-white u-input-5">
    </div>
    <div id='test' class="u-form-group u-form-partition-factor-2 u-label-top u-form-group-6">
      <label for="text-16e6" class="u-custom-font u-heading-font u-label u-text-body-alt-color u-label-6">Source IP Address</label>
      <input type="text" placeholder="Source IP Address" id="text-16e6" name="text" class="u-border-1 u-border-custom-color-1 u-custom-font u-heading-font u-input u-input-rectangle u-radius-50 u-white u-input-6">
    </div>


    <div id='advancedOptions' class="u-form-group u-form-partition-factor-2 u-label-top u-form-group-7">
      <label for="text-c9f3" class="u-custom-font u-heading-font u-label u-text-body-alt-color u-label-7">Destination IP Address</label>
      <input type="text" placeholder="Destination IP Address" id="text-c9f3" name="text-2" class="u-border-1 u-border-custom-color-1 u-custom-font u-heading-font u-input u-input-rectangle u-radius-50 u-white u-input-7">
    </div>
    <div class="u-align-left u-form-group u-form-submit u-label-top">
      <input type="submit" value="submit" class="u-form-control-hidden">
      <a href="#" class="u-btn u-btn-round u-btn-submit u-button-style u-custom-color-2 u-custom-font u-heading-font u-radius-50 u-btn-1">Submit</a>
    </div>
  </form>
</div>
<a href="#" class="u-border-none u-btn u-btn-round u-button-style u-custom-color-2 u-custom-font u-heading-font u-hover-feature u-radius-50 u-text-body-alt-color u-btn-2"> </a>

JavaScript：

    <script type='text/javascript'>
    $(document).ready(function () {
        $('#advancedOptions').hide();
        $('.u-btn-2').click(function() {
            if ($('#advancedOptions').is(':hidden')) {
                 $('#advancedOptions').slideDown();
            } else {
                 $('#advancedOptions').slideUp();
            }
        });
    });
</script>

目前我可以使用 div 隱藏輸入，id='advancedOptions'但是我也想將其應用于 div id='test'。我嘗試將 JavaScript 修改為以下內容，但這不起作用（它隱藏id='test'并且看起來不適用于 div id='advancedOptions'：

            <script type='text/javascript'>
    $(document).ready(function () {
        $('#advancedOptions' && '#test').hide();
        $('.u-btn-2').click(function() {
            if ($('#advancedOptions' && '#test').is(':hidden')) {
                 $('#advancedOptions' && '#test').slideDown();
            } else {
                 $('#advancedOptions' && '#test').slideUp();
            }
        });
    });
</script>

當我計劃在將來添加更多表單輸入時，有沒有辦法可以修改此 JavaScript 以應用于多個 div ID？

我是Java新手，所以任何幫助都會很棒，謝謝！

uj5u.com熱心網友回復：

您在此行中傳遞了錯誤的引數

$('#advancedOptions' && '#test').hide()

所以'#advancedOptions' && '#test'回傳'#test'

（在此處查看更多 abot 邏輯 AND 運算子）

您可以在 2 行中撰寫此函式

$('#advancedOptions' && '#test').hide()

所以上面的行變成

$('#advancedOptions').hide()
$('#test').hide()

標籤：javascripthtmljQuery

上一篇：使默認雙擊行為將零寬度空格視為單詞字符

下一篇：如果變數與字串匹配，如何在page.html檔案中禁用Ionic元素