使用 jQuery 显示/隐藏

Using jQuery Show/Hide

本文关键字:隐藏 显示 jQuery 使用      更新时间:2023-09-26

当选择一个作为输入时,希望它显示.toggle,但它到目前为止只是隐藏了它?这也可能是一个很长的机会,但我如何编写这段代码,以便我可以再次使用它,这是我需要的,而不必编写新的类名。

这是我的代码脚本:

$(function () {
if ($(".binary").val() == "0"){
 $( ".toggle" ).hide();
} else {
 $( ".toggle" ).show();
}
});

我的网页

<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>

你的Javascript只在页面加载时执行一次。根据您提供的信息,我认为您真正想做的是:

$(function () {
  $(".binary").change(function() {
    if ($(this).val() == "0"){
      $( ".toggle" ).hide();
    } else {
      $( ".toggle" ).show();
    }
  });
});

不同之处在于,您在这里设置了一个函数,该函数将在每次发生更改事件时运行(= 您在选择框中更改选择)。

尝试将函数包装在更改处理程序中,如下所示:

$(function () {
    $('.binary').change(function() {
        if ($(".binary").val() == "0"){
            $( ".toggle" ).hide();
        } else {
            $( ".toggle" ).show();
        }
});

像这样的事情应该是你想要做的:http://jsfiddle.net/BbXYt/

$(document).ready(function(){
    $(".binary").change(function(){
        if($(".binary").val() == "0"){
            $( ".toggle" ).hide();
        } else {
            $( ".toggle" ).show();
        }
    });
    $( ".toggle" ).hide();
});

.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>

你提到你想要可重用的代码。试试这个:

$(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

<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>

小提琴:http://jsfiddle.net/qCeJ8/