在".bar "中有单选按钮,我在 "div class='selected-item'"中显示所选的输入单选值,名称值必须全部相同,每个.bar中的选择,应该写在".selected-item "本身,当我在第一个".bar "中选择时,第二个".bar "的值也会改变,我如何解决这个问题?
$('.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>
你可以使用jquery的 closest
它将在DOM中向上寻找选择器。然后使用 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>