如何将一个函数应用于网页上的多个 Id

How can I apply a function to multiple Id's on a webpage?

本文关键字：网页 应用于 Id 函数 一个      更新时间：2023-09-26

我希望下面的脚本与表单不同部分中的各种或多个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/

如果我

理解正确，我试图解决您的查询。请检查以下内容。请检查在 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');
  });
});

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

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

更改为使用类，然后对它们运行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>
相关文章：