1
jQueryに基づいて質問があります。同じjQueryエフェクトを使用するクラス/ IDがあります。したがって、別のクラス/ IDに追加するたびに効果を書き直さなければなりません。各クラス/ IDのエフェクトを書き直してコードを再利用する必要はありませんか？ $（ '.classone'、 '.classtwo'）これで、すべてのクラスを同時に対象とした効果が得られました。以下は、チェックボックスを使用した例です。「その他」をチェックすると、コンテンツが表示されます。したがって、私の目標は、各クラス/ IDのコードを書き直すのではなく、jQueryコードを再利用することです。 以下は、私が自分のコードを書いた例です。 Select one idは、Select Twoと同じ表示/非表示エフェクトを持ちます。フィードバックをお寄せください。親指が押されている場合は、理由を教えてください。あなたの時間をありがとう。ここで各クラスIDのエフェクトを常に書き換えなくてもjQueryエフェクトを再利用
$(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">
\t <option selected value>Please select</option>
\t <!--<option selected disabled>* State (for U.S only)</option>-->
\t <option value="s">1</option>
\t <option value="f">2</option>
\t <option value="b">3</option>
\t <option value="m">4</option>
\t <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">
\t <option selected value>Please select</option>
\t <!--<option selected disabled>* State (for U.S only)</option>-->
<option value="s">1</option>
\t <option value="f">2</option>
\t <option value="b">3</option>
\t <option value="m">4</option>
\t <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>