Javascript 使用jQuery显示/隐藏

当选择一个作为输入时，您希望它显示。切换，但它仅隐藏到目前为止？ 同样，这可能是一个长期的问题，但我如何编写这段代码，以便再次使用它，而不必编写新的类名

以下是我的代码脚本：

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

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

显示边界
文件管理器

尝试将函数包装到更改处理程序中，如下所示：

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

---

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

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

---

不同之处在于，您正在设置一个函数，该函数将在每次发生更改事件时运行（=您在选择框中更改您的选择）。

类似的操作应该是您想要做的：

HTML:

显示边界
0
1.
文件管理器

您提到需要可重用代码。试试这个：

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

显示边界
文件管理器

---

Fiddle:

这是您的全部Javascript吗？您是用

onLoad

或类似的包装方式包装它吗？您将在一行中编写它。感谢这项工作，我尝试使用change（），但写错了。很高兴我能提供帮助。如果您的问题得到解决，我们将感谢您将最佳答案标记为已接受。

<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();
        }
    });
});

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