重复使用 jQuery 效果，而不必为每个 class ID 不断重写效果

Question

我有一个基于 jQuery 的问题。我在 classes/IDs 中使用了相同的 jQuery 效果。因此，每次要添加到另一个class/ID时，我都必须重写效果。有没有一种方法我不必为每个 class/ID 重写效果而只重用代码？我尝试在针对效果 $('.classone','.classtwo') 时使用多个类这导致效果针对我所有的类同时。下面我有一个使用复选框的示例，如果选中 "other"，则会显示内容。因此，我的目标是重用 jQuery 代码而不是为每个 class/ID 重写代码。下面是我如何编写代码的示例。 Select一个id和Select两个一样显示隐藏效果。请随时提供反馈。如果不满意，请告诉我原因，以便我改进。谢谢你的时间。

$(document).ready(function() {

  /*Select One- Displays input when "other" is selected*/
  $('#select_one').on('change', function() {
    if (this.value == 'other') {
      $("#select_one_other").show();
    } else {
      $("#select_one_other").hide();
    }
  });




  /*Select Two - Displays input when "other" is selected*/
  $('#select_two').on('change', function() {
    if (this.value == 'other') {
      $("#select_two_other").show();
    } else {
      $("#select_two_other").hide();
    }
  });


});

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>

<body>
<!--Select One-->
<label style="margin-bottom:0px; font-weight:bold;width:100%;font-size:1.2em; color:#802753;opacity:.9;">
   <select id="select_one">
   <option selected value>Please select</option>
   <!--<option selected disabled>* State (for U.S only)</option>-->
   <option value="s">1</option>
   <option value="f">2</option>
   <option value="b">3</option>
   <option value="m">4</option>
   <option value="other">Other</option>
   </select>
</label>


<div style='display:none;' id='select_one_other'>
<div class="form_content">
   <label class="label-effect" for="Other">If other, please specify</label>
   <input type="text" class="form-control"  placeholder="" />
</div>
</div>

<!--Select Two-->
<label style="margin-bottom:0px; font-weight:bold;width:100%;font-size:1.2em; color:#802753;opacity:.9;">
   <select id="select_two">
   <option selected value>Please select</option>
   <!--<option selected disabled>* State (for U.S only)</option>-->
  <option value="s">1</option>
   <option value="f">2</option>
   <option value="b">3</option>
   <option value="m">4</option>
   <option value="other">Other</option>
   </select>
</label>


<div style='display:none;' id='select_two_other'>
<div class="form_content">
   <label class="label-effect" for="Other">If other, please specify</label>
   <input type="text" class="form-control"  placeholder="" />
</div>
</div>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</body>
</html>

Answer 1

给你一个解决方案https://jsfiddle.net/4eyzfnkj/

$(document).ready(function() {

  /*Select One- Displays input when "other" is selected*/
  $('#select_one, #select_two').on('change', function() {
    if (this.value == 'other') {
      $('#' + $(this).attr('id') + '_other').show();
    } else {
      $('#' + $(this).attr('id') + '_other').hide();
    }
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label style="margin-bottom:0px; font-weight:bold;width:100%;font-size:1.2em; color:#802753;opacity:.9;">
   <select id="select_one">
   <option selected value>Please select</option>
   <!--<option selected disabled>* State (for U.S only)</option>-->
   <option value="s">1</option>
   <option value="f">2</option>
   <option value="b">3</option>
   <option value="m">4</option>
   <option value="other">Other</option>
   </select>
</label>


<div style='display:none;' id='select_one_other'>
<div class="form_content">
   <label class="label-effect" for="Other">If other, please specify</label>
   <input type="text" class="form-control"  placeholder="" />
</div>
</div>

<!--Select Two-->
<label style="margin-bottom:0px; font-weight:bold;width:100%;font-size:1.2em; color:#802753;opacity:.9;">
   <select id="select_two">
   <option selected value>Please select</option>
   <!--<option selected disabled>* State (for U.S only)</option>-->
  <option value="s">1</option>
   <option value="f">2</option>
   <option value="b">3</option>
   <option value="m">4</option>
   <option value="other">Other</option>
   </select>
</label>


<div style='display:none;' id='select_two_other'>
<div class="form_content">
   <label class="label-effect" for="Other">If other, please specify</label>
   <input type="text" class="form-control"  placeholder="" />
</div>
</div>

希望对您有所帮助。

重复使用 jQuery 效果，而不必为每个 class ID 不断重写效果

Reuse jQuery effect without having to constantly rewrite the effect for each class ID

html

jquery

coding-style