JavaScriptまたはjQueryを使用してループ内の選択したクラスまたは名前を呼び出すにはどうすればよいですか？このような

Question

私のjavascriptのコード：このような

$('input[name="is_follow_up"]').change(function(){ 
    var val = $(this).val(), 
     input = $('.input-reason'); 
    if (val == 'n') 
     input.show() 
    else 
     input.hide(); 
}); 
$('.select-reason').change(function(){ 
    var reason = $(this).val(), 
     others = $('.textarea-others'); 
    if (reason == 4) { 
     others.show(); 
     $(this).removeAttr('name'); 
     others.find('textarea').attr('name', 'reason'); 
    } 
    else { 
     others.hide() 
     $(this).attr('name', 'reason'); 
     others.find('textarea').removeAttr('name'); 
    } 
}); 

私のhtmlコード：私は5データの順序を持​​っている場合は

@foreach($orders as $order) 
... 
    <label class="radio-inline"> 
     <input type="radio" name="is_follow_up" id="inlineRadio1" value="y" required checked> accept 
    </label> 
    <label class="radio-inline"> 
     <input type="radio" name="is_follow_up" id="inlineRadio2" value="n" required> reject 
    </label> 
    <div class="row input-reason" style="display: none"> 
     <div class="col-sm-2">Reason:</div> 
     <div class="col-sm-5"> 
      <div class="form-group"> 
       <select class="form-control select-reason" name="reason"> 
        <option value="Reason 1">Reason 1</option> 
        <option value="Reason 2">Reason 2</option> 
        <option value="Reason 3">Reason 3</option> 
        <option value="4">Reason 4</option> 
       </select> 
      </div> 
      <div class="form-group textarea-others" style="display: none"> 
      <textarea rows="5" class="form-control"></textarea> 
      </div> 
     </div> 
    </div> 
... 
@endforeach 

。 5回の反復があります。ユーザーが選択は、最初の反復で拒否した場合、それが唯一の最初の反復のユーザであれば

にテキストエリアを表示

：私は最初の反復で拒否を選択した場合 は、それは私がしたいすべての反復

でテキストエリアが表示されます選択は、3回目の反復で却下、それだけで

私はそれをどのように行うことができます

など第三の反復でテキストエリアを表示しますか？

Answer 1

thisコンテキストを使用してください。 :)（うまくいけば私はここにあなたを得ている）。

$('.select-reason').change(function(){ 
    var reason = $(this).val(), 
     others = $('.textarea-others'); 
    if (reason == 4) { 
     others.show(); 
     $(this).removeAttr('name'); 
     $(this).closest('div').next().find('textarea').attr('name', 'reason'); 
    } 
    else { 
     others.hide() 
     $(this).attr('name', 'reason'); 
     $(this).closest('div').next().find('textarea').removeAttr('name'); 
    } 
    }); 

が実はそうで特定のclosest(), parent()とのdivとを見つける方法がたくさんあるが、私は（簡単な言葉で）ここで何をやっている、これを試してみてください：

• あなたthisがありますselect-reason要素。
• 最も近い（「divが」）となります<div class="form-group">
• あなたはそれを参照してください

を探しているテキストエリアが見つかっ（）<div class="form-group textarea-others" style="display: none">

とfind()に行く隣あなたはthisコンテキストとしてを取る場合には簡単です変更された要素だけで動作します。以前は$('.textarea-others')がページ内のすべてのテキストエリアを選択していました。

PS：これは、あなたがhtmlを変更し、next()が新しいdivを今すぐ指すように、selectとtextareaの間に別のdivを追加しない限り機能します。 is_follow_up変更のための同じ

：

$('input[name="is_follow_up"]').change(function(){ 
    var val = $(this).val(), 
     input = $('.input-reason'); 
    if (val == 'n') 
    $(this).closest('div.display-someblock').find('.input-reason').show(); 
    else 
    input.hide(); 
}); 

はそれを作るためには、簡単に私はあなたが@foreach loopを使用している<div class="display-someblock">

@foreach($orders as $order) 
... 
    <div class="display-someblock"> 
    <label class="radio-inline"> 
     <input type="radio" name="is_follow_up" id="inlineRadio1" value="y" required checked> accept 
    </label> 
..... 
    </div> 

Answer 2

まず、ループのための内部要素を包み、ループ内で、あなたはradio button与えています同じnameは、すべてのラジオボタンが同じ名前を持つため、一度に1つのラジオボタンしかチェックできないため、正しくありません。

この場合、ラジオボタンの名前に反復のインデックスを追加して、name="is_follow_up1", name="is_follow_up2"というように名前を付けます。

How to find the foreach indexは、PHPを使用しているように反復値を取得するために参照できます。

同様に、選択ボックスとテキスト領域で同じことを行う必要があります。そのため、下のコードスニペットが一意に識別され、その下でHTMLを参照することができます。

また、一部の要素にiteration attributeを追加して、スニペットに存在する値を取得しました。

後でスニペットのようにJqueryコードを更新して、必要な機能を得ることができます。

同じことについてご不明な点がありましたら教えてください。

$(document).ready(function() { 
 
    $('input[name^="is_follow_up"]').change(function() { 
 
    var val = $(this).val(), 
 
     iteration = $(this).attr('iteration'), 
 
     input = $('.input-reason' + iteration); 
 
    if (val == 'n') 
 
     input.show() 
 
    else 
 
     input.hide(); 
 
    }); 
 
    $('select[name^="reason"]').change(function() { 
 
    var reason = $(this).val(), 
 
     iteration = $(this).attr('iteration'), 
 
     others = $('.textarea-others' + iteration); 
 
    if (reason == 4) { 
 
     others.show(); 
 
     $(this).removeAttr('name'); 
 
     others.find('textarea').attr('name', 'reason'); 
 
    } else { 
 
     others.hide() 
 
     $(this).attr('name', 'reason'); 
 
     others.find('textarea').removeAttr('name'); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<label class="radio-inline"> 
 
     <input type="radio" name="is_follow_up1" iteration='1' id="inlineRadio1" value="y" required checked> accept 
 
    </label> 
 
<label class="radio-inline"> 
 
     <input type="radio" name="is_follow_up1" iteration='1' id="inlineRadio2" value="n" required> reject 
 
    </label> 
 
<div class="row input-reason1" style="display: none"> 
 
    <div class="col-sm-2">Reason:</div> 
 
    <div class="col-sm-5"> 
 
    <div class="form-group"> 
 
     <select class="form-control select-reason" name="reason1" iteration='1'> 
 
        <option value="Reason 1">Reason 1</option> 
 
        <option value="Reason 2">Reason 2</option> 
 
        <option value="Reason 3">Reason 3</option> 
 
        <option value="4">Reason 4</option> 
 
       </select> 
 
    </div> 
 
    <div class="form-group textarea-others1" style="display: none"> 
 
     <textarea rows="5" class="form-control"></textarea> 
 
    </div> 
 
    </div> 
 
</div> 
 
<label class="radio-inline"> 
 
     <input type="radio" name="is_follow_up2" iteration='2' id="inlineRadio1" value="y" required checked> accept 
 
    </label> 
 
<label class="radio-inline"> 
 
     <input type="radio" name="is_follow_up2" iteration='2' id="inlineRadio2" value="n" required> reject 
 
    </label> 
 
<div class="row input-reason2" style="display: none"> 
 
    <div class="col-sm-2">Reason:</div> 
 
    <div class="col-sm-5"> 
 
    <div class="form-group"> 
 
     <select class="form-control select-reason" name="reason2" iteration='2'> 
 
        <option value="Reason 1">Reason 1</option> 
 
        <option value="Reason 2">Reason 2</option> 
 
        <option value="Reason 3">Reason 3</option> 
 
        <option value="4">Reason 4</option> 
 
       </select> 
 
    </div> 
 
    <div class="form-group textarea-others2" style="display: none"> 
 
     <textarea rows="5" class="form-control"></textarea> 
 
    </div> 
 
    </div> 
 
</div> 
 
<label class="radio-inline"> 
 
     <input type="radio" name="is_follow_up3" id="inlineRadio1" iteration='3' value="y" required checked> accept 
 
    </label> 
 
<label class="radio-inline"> 
 
     <input type="radio" name="is_follow_up3" id="inlineRadio2" iteration='3' value="n" required> reject 
 
    </label> 
 
<div class="row input-reason3" style="display: none"> 
 
    <div class="col-sm-2">Reason:</div> 
 
    <div class="col-sm-5"> 
 
    <div class="form-group"> 
 
     <select class="form-control select-reason" name="reason3" iteration='3'> 
 
        <option value="Reason 1">Reason 1</option> 
 
        <option value="Reason 2">Reason 2</option> 
 
        <option value="Reason 3">Reason 3</option> 
 
        <option value="4">Reason 4</option> 
 
       </select> 
 
    </div> 
 
    <div class="form-group textarea-others3" style="display: none"> 
 
     <textarea rows="5" class="form-control"></textarea> 
 
    </div> 
 
    </div> 
 
</div>