如何将函数应用于网页上的多个 ID？ [关闭]答案

【问题标题】：How can I apply a function to multiple Id's on a webpage? [closed]如何将函数应用于网页上的多个 ID？ [关闭]
【发布时间】：2016-01-20 14:53:14
【问题描述】：

我希望下面的脚本可以在表单的不同部分与各种或多个 id 一起使用，彼此独立工作。

$(document).ready(function() {
$('#submit *').prop( "disabled", true );
$('#submit').css('color','#ccc');

$("input:radio[class^='yes-']").click(function() {
$('#submit *').prop( "disabled", false );
$('#submit *').css('color','#000');
});
$("input:radio[class^='no-']").click(function() {
$('#submit *').prop( "disabled", true );
$('#submit input').prop( "checked", false );
$('#submit textarea').prop( "value", "");
$('#submit *').css('color','#ccc');
});
});

https://jsfiddle.net/artboycat/dcpy5k6y/

【问题讨论】：

祝你好运！ ……或者你的意思是问一个问题？因为，如果你这样做了，你忘了显示足够的代码（参见“minimal reproducible example”指南）来重现你的问题，你忘了正确缩进你的 jQuery，你没有解释你在哪里或为什么卡住了，或者你需要什么帮助。
使用类，而不是 ID。然后使用任何相关的横向方法来定位特定领域的相关输入
对不起，我以为我解释过了。而且，我有一个概述了基础知识的小提琴。下次我将包含 html。另外，我认为我确实正确缩进了它。我是新手。

标签： javascript jquery

【解决方案1】：

如果我理解正确，我已尝试解决您的问题。请检查以下内容。请检查对 HTML 和 JS 代码所做的修改。谢谢:)

JSFiddle

<div class="grps" id="grps1">

 <input type="radio" name="1" class="yes-1" value=1>yes 
 <input type="radio" name="1" class="no-1" value=2>no

<fieldset class="one" id="submit1">
  <legend>Event Type*</legend>
   <ul>
     <li>Please check event type that best describes your event</li>
     <li>This form must be submitted two weeks prior to event date</li>
   </ul>


<input type="radio" value="1" name="event-type-1" id="etype-1" class="input-float-left"><label for="etype-1" class="label-longer">&nbsp;Meeting</label>   
 <br>
<input type="radio" value="2" name="event-type-2" id="etype-2" class="input-float-left"><label for="etype-2" class="label-longer">&nbsp;Seminar</label>  
<br>
<input type="radio" value="3" name="event-type-3" id="etype-3" class="input-float-left"><label for="etype-3" class="label-longer">&nbsp;Panel</label> 
 <br>
<input type="radio" value="4" name="event-type-4" id="etype-4" class="input-float-left"><label for="etype-4" class="label-longer">&nbsp;Training</label>   
 <br>
<input type="radio" value="5" name="event-type-5" id="etype-5" class="input-float-left"><label for="etype-5" class="label-longer">&nbsp;Symposium</label>  
<br>
<input type="radio" value="9" name="event-type-6" id="etype-9" class="input-float-left"><label for="etype-9" class="label-longer">&nbsp;Other</label>
<div id="show-me"><TEXTAREA COLS="60" ROWS="4" name="other_item" id="etype-9" maxlength="80" size="25" class="input"></TEXTAREA></div>  

</fieldset>
</div>

 <BR clear="all">
<br>


<div class="grps" id="grps2">

 <input type="radio" name="1" class="yes-2" value=1>yes 
 <input type="radio" name="1" class="no-2" value=2>no

<fieldset class="one" id="submit2">
<legend>Event Type*</legend>
<ul>
<li>Please check event type that best describes your event</li>
<li>This form must be submitted two weeks prior to event date</li>
</ul>


<input type="radio" value="1" name="event-type-1" id="etype-1" class="input-float-left"><label for="etype-1" class="label-longer">&nbsp;Meeting</label>   
 <br>
<input type="radio" value="2" name="event-type-2" id="etype-2" class="input-float-left"><label for="etype-2" class="label-longer">&nbsp;Seminar</label>  
<br>
<input type="radio" value="3" name="event-type-3" id="etype-3" class="input-float-left"><label for="etype-3" class="label-longer">&nbsp;Panel</label> 
 <br>
<input type="radio" value="4" name="event-type-4" id="etype-4" class="input-float-left"><label for="etype-4" class="label-longer">&nbsp;Training</label>   
 <br>
<input type="radio" value="5" name="event-type-5" id="etype-5" class="input-float-left"><label for="etype-5" class="label-longer">&nbsp;Symposium</label>  
<br>
<input type="radio" value="9" name="event-type-6" id="etype-9" class="input-float-left"><label for="etype-9" class="label-longer">&nbsp;Other</label>
<div id="show-me"><TEXTAREA COLS="60" ROWS="4" name="other_item" id="etype-9" maxlength="80" size="25" class="input"></TEXTAREA></div>  

</fieldset>
</div>

    $(document).ready(function() {
  $('#submit1 *').prop( "disabled", true );
  $('#submit1').css('color','#ccc');

  $("input:radio[class^='yes-']").click(function() {
    var no = $(this).parent().attr('id').slice(-1);
    $('#submit'+no+' *').prop( "disabled", false );
    $('#submit'+no+' *').css('color','#000');
  });
  $("input:radio[class^='no-']").click(function() {
    var no = $(this).parent().attr('id').slice(-1);
    $('#submit'+no+' *').prop( "disabled", true );
    $('#submit'+no+' input').prop( "checked", false );
    $('#submit'+no+' textarea').prop( "value", "");
    $('#submit'+no+' *').css('color','#ccc');
  });
});

【讨论】：

谢谢，成功了！

【解决方案2】：

只需编写一个接受 id 的函数并在代码中使用该 id。例如，

var foo = function(id){
    $('#' + id).css('color', '#000');
}

【讨论】：

【解决方案3】：

改为使用类，然后在它们上运行each() 函数使用单选框，使用this，然后使用父子选择器来查找合适的元素。

JSFiddle：https://jsfiddle.net/dcfxzb5y/1/

JS：

$(document).ready(function() {


  $('.submit-field *').prop( "disabled", true );
  $('.submit-field ').css('color','#ccc');

  $("input:radio[class^='yes-']").click(function() {
      $(this).parent().children('.submit-field').children().prop( "disabled", false );
      $(this).parent().children('.submit-field').children().css('color','#000');
  });

  $("input:radio[class^='no-']").click(function() {
    $(this).parent().children('.submit-field').children().prop( "disabled", true );
    $(this).parent().children('.submit-field').children('input').prop( "checked", false );
    $(this).parent().children('.submit-field').children('textarea').prop( "value", "");
    $(this).parent().children('.submit-field').children().css('color','#ccc');
  });


});

HTML：

  <script src="https://code.jquery.com/jquery-2.2.0.js"></script>
  <div class="grps" id="grps1">

   <input type="radio" name="1" class="yes-1" value=1>yes 
   <input type="radio" name="1" class="no-1" value=2>no

  <fieldset class="submit-field">
  <legend>Event Type*</legend>
  <ul>
  <li>Please check event type that best describes your event</li>
  <li>This form must be submitted two weeks prior to event date</li>
  </ul>


  <input type="radio" value="1" name="event-type-1" id="etype-1" class="input-float-left"><label for="etype-1" class="label-longer">&nbsp;Meeting</label>   
   <br>
  <input type="radio" value="2" name="event-type-2" id="etype-2" class="input-float-left"><label for="etype-2" class="label-longer">&nbsp;Seminar</label>  
  <br>
  <input type="radio" value="3" name="event-type-3" id="etype-3" class="input-float-left"><label for="etype-3" class="label-longer">&nbsp;Panel</label> 
   <br>
  <input type="radio" value="4" name="event-type-4" id="etype-4" class="input-float-left"><label for="etype-4" class="label-longer">&nbsp;Training</label>   
   <br>
  <input type="radio" value="5" name="event-type-5" id="etype-5" class="input-float-left"><label for="etype-5" class="label-longer">&nbsp;Symposium</label>  
  <br>




  <input type="radio" value="9" name="event-type-6" id="etype-9" class="input-float-left"><label for="etype-9" class="label-longer">&nbsp;Other</label>
  <div id="show-me"><TEXTAREA COLS="60" ROWS="4" name="other_item" id="etype-9" maxlength="80" size="25" class="input"></TEXTAREA></div>  

  </fieldset>
  </div>

   <BR clear="all">
  <br>


  <div>

   <input type="radio" name="1" class="yes-2" value=1>yes 
   <input type="radio" name="1" class="no-2" value=2>no

  <fieldset class="submit-field">
  <legend>Event Type*</legend>
  <ul>
  <li>Please check event type that best describes your event</li>
  <li>This form must be submitted two weeks prior to event date</li>
  </ul>


  <input type="radio" value="1" name="event-type-1" id="etype-1" class="input-float-left"><label for="etype-1" class="label-longer">&nbsp;Meeting</label>   
   <br>
  <input type="radio" value="2" name="event-type-2" id="etype-2" class="input-float-left"><label for="etype-2" class="label-longer">&nbsp;Seminar</label>  
  <br>
  <input type="radio" value="3" name="event-type-3" id="etype-3" class="input-float-left"><label for="etype-3" class="label-longer">&nbsp;Panel</label> 
   <br>
  <input type="radio" value="4" name="event-type-4" id="etype-4" class="input-float-left"><label for="etype-4" class="label-longer">&nbsp;Training</label>   
   <br>
  <input type="radio" value="5" name="event-type-5" id="etype-5" class="input-float-left"><label for="etype-5" class="label-longer">&nbsp;Symposium</label>  
  <br>




  <input type="radio" value="9" name="event-type-6" id="etype-9" class="input-float-left"><label for="etype-9" class="label-longer">&nbsp;Other</label>
  <div id="show-me"><TEXTAREA COLS="60" ROWS="4" name="other_item" id="etype-9" maxlength="80" size="25" class="input"></TEXTAREA></div>  

  </fieldset>
  </div>

【讨论】：