如何將一個函數應用於網頁上的多個Id？

-4

我希望下面的腳本與表單的不同部分中的各個或多個id一起使用，彼此獨立工作。如何將一個函數應用於網頁上的多個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/

來源

2016-01-20 ramoncis

祝您好運與！ ...或者你是否想要問一個問題？因爲，如果你這樣做了，你忘記了顯示足夠的代碼（參見「[MCVE]」指南）來重現你的問題，你忘記了正確縮進你的jQuery，你沒有解釋你卡在哪裏或者爲什麼，或者你需要什麼幫助。 –

使用類，而不是ID。然後使用任何相關的橫向方法在特定領域針對相關投入 –

對不起，我想我解釋了。另外，我有一個小提琴，概述了基本知識。下次我將包含html。另外，我還以爲我確實縮進了它。我對此很陌生。 – ramoncis

我試過，如果我理解正確的話，以解決您的查詢。請檢查以下內容。請檢查在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'); 
    }); 
});

來源

2016-01-20 15:33:29 Manish

謝謝，這個伎倆！ – ramoncis

只寫一個函數，它接受一個ID，並使用該ID在你的代碼。例如，

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

來源

2016-01-20 14:57:31

更改爲使用類，然後對它們運行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>

來源

2016-01-20 15:14:01 user5697101

如何將一個函數應用於網頁上的多個Id？

回答

相關問題