使用JavaScript的HTML表单显示/隐藏选项

我正试图使用JavaScript在HTML表单中显示/隐藏特定的高级字段。我使用的是使用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>

目前，我可以使用divid='advancedOptions'隐藏输入，但我也想将其应用于divid='test'。我尝试将JavaScript修改为以下内容，但没有成功(它隐藏了id='test'，看起来不适用于divid='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的新手，所以任何帮助都会很棒，谢谢！

为了有一个更可重用/通用的方法，我建议添加一个data-attribute并将其用作主选择器。否则，您必须始终更改不同页面/案例上的id。

$(document).ready(function(){
//REM: Instead of an id, hide every element having the attribute data-hide
//$('#advancedOptions').hide();
$('div[data-hide]').hide();

//REM: Change textContent to "+";
this.textContent = '+';
$('.u-btn-2').click(function() {
//REM: Same here, instead of id, check for the attribute
//if($('#advancedOptions').is(':hidden')){
//  $('#advancedOptions').slideDown();
//}
//else{
//  $('#advancedOptions').slideUp();
//}

if($('div[data-hide]').is(':hidden')){
$('div[data-hide]').slideDown();
this.textContent = '-'
}
else{
$('div[data-hide]').slideUp();
this.textContent = '+'
}
})
});

a{text-decoration: none}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<div>
<label for="text-c578">Template Frequency (seconds)</label>
<input type="text" placeholder="Template Frequency" id="text-c578">
</div>
<div id='test' data-hide="true">
<label for="text-16e6">Source IP Address</label>
<input type="text" placeholder="Source IP Address" id="text-16e6">
</div>
<div id='advancedOptions' data-hide="true">
<label for="text-c9f3">Destination IP Address</label>
<input type="text" placeholder="Destination IP Address" id="text-c9f3">
</div>
<div>
<input type="submit" value="submit">
<a href="#">Submit</a>
</div>
</div>
<a href="#" class="u-btn-2">+</a>

如果您想向功能添加更多元素，只需在其上添加一个data-hide属性，就会自动考虑它。或者删除元素上的属性以将其排除在外。

我去掉了类和名称，因为它们在我的示例中没有任何作用，而且我缺少它背后的css。

您在行中传递了错误的参数

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

因此'#advancedOptions'&amp；'#test">返回"#test">

(点击此处查看更多关于逻辑AND运算符的信息(

您可以在2行中编写此函数

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

所以上面的线变成

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

相关内容

最新更新

热门标签：