[英]Using jQuery Show/Hide
When select one as input want it to display .toggle, but it's only hiding it so far? 当选择一个作为输入时,它希望它显示.toggle,但它只是隐藏它到目前为止? Also this may be a long shot but how can I write this code so that I can use it again which I will be needing to instead of having to write new classes names. 这也许是一个很长的镜头,但我怎么能写这个代码,以便我可以再次使用它,我将需要而不必编写新的类名称。
Here's my code script: 这是我的代码脚本:
$(function () {
if ($(".binary").val() == "0"){
$( ".toggle" ).hide();
} else {
$( ".toggle" ).show();
}
});
My html 我的HTML
<div class="option checkbox">
<label class="field_wrap">
<div class="label">Show Borders</div>
<div class="field">
<select class="binary tug" name="show_post_borders">
<option value="0"></option>
<option value="1"></option>
</select>
</div>
</label>
</div>
<div class="toggle">Filer</div>
Your Javascript only executes once when the page is loading. 您的Javascript仅在加载页面时执行一次。 Based in your provided information I think what you really want to do is this: 根据您提供的信息,我认为您真正想要做的是:
$(function () {
$(".binary").change(function() {
if ($(this).val() == "0"){
$( ".toggle" ).hide();
} else {
$( ".toggle" ).show();
}
});
});
The difference is that here you are setting up a function that will run every time a change-event occurs (= you changing your selection in the select box). 不同之处在于,您在此处设置的功能将在每次发生更改事件时运行(=您在选择框中更改选择)。
Try wrapping your function in a change handler, like so: 尝试将您的函数包装在更改处理程序中,如下所示:
$(function () {
$('.binary').change(function() {
if ($(".binary").val() == "0"){
$( ".toggle" ).hide();
} else {
$( ".toggle" ).show();
}
});
Something like this should be what you're wanting to do: http://jsfiddle.net/BbXYt/ 这样的事情应该是你想要做的事情: http : //jsfiddle.net/BbXYt/
$(document).ready(function(){
$(".binary").change(function(){
if($(".binary").val() == "0"){
$( ".toggle" ).hide();
} else {
$( ".toggle" ).show();
}
});
$( ".toggle" ).hide();
});
HTML: HTML:
<div class="option checkbox">
<label class="field_wrap">
<div class="label">Show Borders</div>
<div class="field">
<select class="binary tug" name="show_post_borders">
<option value="0">0</option>
<option value="1">1</option>
</select>
</div>
</label>
</div>
<div class="toggle">Filer</div>
You mentioned you want reusable code. 你提到你想要可重复使用的代码。 Try this: 尝试这个:
$(function () {
$(".toggle_field").change(function() {
var field = $(this);
if (field.val() == field.data("toggle-show-val")) {
$(field.data("toggle-selector")).show();
} else {
$(field.data("toggle-selector")).hide();
}
});
});
HTML HTML
<div class="option checkbox">
<label class="field_wrap">
<div class="label">Show Borders</div>
<div class="field">
<select class="binary tug toggle_field" data-toggle-selector=".toggle" data-toggle-show-val="1" name="show_post_borders">
<option value="0"></option>
<option value="1"></option>
</select>
</div>
</label>
</div>
<div class="toggle">Filer</div>
Fiddle: http://jsfiddle.net/qCeJ8/ 小提琴: http : //jsfiddle.net/qCeJ8/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.