Select 所屬元素

Question

“.bar”中有單選按鈕，我在“div class='selected-item'”中顯示選定的輸入單選值。 名稱值必須全部相同。 each.bar 中的選擇應該寫在“.selected-item”本身上。 當我在第一個“.bar”中的 select 時，第二個“.bar”的值也發生了變化。 我該如何解決。 .radio 選擇應該改變它所在的.bar 中的.selected-item 的值。

 $('.bar input[name="exa"]').on('change', function() { var selectedprice = $('.bar input[name=exa]:checked').val(); $( ".selected-item b" ).text( selectedprice ); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="bar"> <h2>This is first bar. class name "bar"</h2> <div class="selected-item">Selected İtem: <b>130</b></div> <label> <input type="radio" name="exa" value="130" /> 130 </label> <label> <input type="radio" name="exa" value="140" /> 140 </label> <label> <input type="radio" name="exa" value="150" /> 150 </label> <label> <input type="radio" name="exa" value="160" /> 160 </label> </div> <div class="bar"> <h2>This is second bar. Class name "bar" again.</h2> <div class="selected-item">Selected İtem: <b>130</b></div> <label> <input type="radio" name="exa" value="150" /> 130 </label> <label> <input type="radio" name="exa" value="140" /> 140 </label> <label> <input type="radio" name="exa" value="150" /> 150 </label> <label> <input type="radio" name="exa" value="160" /> 160 </label> </div>

Answer 1

您可以在 DOM 中使用 jquery closest的 go UP 來尋找選擇器。 然后使用FIND在 DOM 中向下搜索適當的字段。

 $('.bar input[name="exa"]').on('change', function() { var selectedprice = $(this).closest(".bar").find('input[name=exa]:checked').val(); $(this).closest(".bar").find( ".selected-item b" ).text( selectedprice ); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="bar"> <h2>This is first bar. class name "bar"</h2> <div class="selected-item">Selected İtem: <b>130</b></div> <label> <input type="radio" name="exa" value="130" /> 130 </label> <label> <input type="radio" name="exa" value="140" /> 140 </label> <label> <input type="radio" name="exa" value="150" /> 150 </label> <label> <input type="radio" name="exa" value="160" /> 160 </label> </div> <div class="bar"> <h2>This is second bar. Class name "bar" again.</h2> <div class="selected-item">Selected İtem: <b>130</b></div> <label> <input type="radio" name="exa" value="130" /> 130 </label> <label> <input type="radio" name="exa" value="140" /> 140 </label> <label> <input type="radio" name="exa" value="150" /> 150 </label> <label> <input type="radio" name="exa" value="160" /> 160 </label> </div>