我有 3 个输入框,每个输入框上方都有单选按钮,用于填写框的值。每个框有 5 个单选按钮。每个框/按钮组应独立运行。它们是用相同的类创建的,我根据单选按钮和 onclick 单选按钮监听器调整输入框中的值,就像这样
document.getElementsByClassName('nyp-input')[0].value=this.value;
document.getElementsByClassName('nyp-input')[1].value=this.value;
document.getElementsByClassName('nyp-input')[2].value=this.value;
这不起作用,因为它调整了所有 3 个,但我需要它来调整最接近的输入。我试过下面的
jQuery('input').closest('nyp').find('.nyp-input');
adj.value=this.value;
上下文中的完整片段
<div class="nyp" data-price="0" data-max-price="" >
<div class="price-wrapper">
<div class="donation-options">
<label for="nyp-suggested-1">
<input type="radio" name="nyp-suggested" value="20" id="nyp-suggested-1" onclick="
var adj = jQuery('input').closest('nyp').find('.nyp-input');
adj.value=this.value;
"> $20
</label>
<label for="nyp-suggested-2">
<input type="radio" name="nyp-suggested" value="50" id="nyp-suggested-2" onclick="document.getElementsByClassName('nyp-input')[0].value=this.value; document.getElementsByClassName('nyp-input')[1].value=this.value; document.getElementsByClassName('nyp-input')[2].value=this.value;"> $50
</label>
<label for="nyp-suggested-3">
<input type="radio" name="nyp-suggested" value="100" id="nyp-suggested-3" onclick="document.getElementsByClassName('nyp-input')[0].value=this.value; document.getElementsByClassName('nyp-input')[1].value=this.value; document.getElementsByClassName('nyp-input')[2].value=this.value;"> $100
</label>
<label for="nyp-suggested-4">
<input type="radio" name="nyp-suggested" value="500" id="nyp-suggested-4" onclick="document.getElementsByClassName('nyp-input')[0].value=this.value; document.getElementsByClassName('nyp-input')[1].value=this.value; document.getElementsByClassName('nyp-input')[2].value=this.value;"> $500
</label>
</div>
</div>
<label for="nyp">
Other ( $ ) </label>
<input id="nyp" name="nyp" type="text" value="0.00" title="nyp" class="input-text amount nyp-input text">
如何获取最接近的nyp-input来调整值。
最佳答案
试试这段代码
$(function(){
$('.nyp-radio').click(function(){
$(this).parents('.price-wrapper').children('[type="text"]').val($(this).val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nyp" data-price="0" data-max-price="" >
<div class="price-wrapper">
<div class="donation-options">
<label for="nyp-suggested-1">
<input type="radio" class='nyp-radio' name="nyp-suggested" value="20" id="nyp-suggested-1" > $20
</label>
<label for="nyp-suggested-2">
<input type="radio" class='nyp-radio' name="nyp-suggested" value="50" id="nyp-suggested-2" > $50
</label>
<label for="nyp-suggested-3">
<input type="radio" class='nyp-radio' name="nyp-suggested" value="100" id="nyp-suggested-3" > $100
</label>
<label for="nyp-suggested-4">
<input type="radio" class='nyp-radio' name="nyp-suggested" value="500" id="nyp-suggested-4" > $500
</label>
</div>
<label for="nyp">
Other ( $ ) </label>
<input id="nyp" name="nyp" type="text" value="0.00" title="nyp" class="input-text amount nyp-input text">
</div>
<div class="nyp" data-price="0" data-max-price="" >
<div class="price-wrapper">
<div class="donation-options">
<label for="nyp-suggested-11">
<input type="radio" class='nyp-radio' name="nyp-suggested1" value="20" id="nyp-suggested-11" > $20
</label>
<label for="nyp-suggested-12">
<input type="radio" class='nyp-radio' name="nyp-suggested1" value="50" id="nyp-suggested-12" > $50
</label>
<label for="nyp-suggested-13">
<input type="radio" class='nyp-radio' name="nyp-suggested1" value="100" id="nyp-suggested-13" > $100
</label>
<label for="nyp-suggested-14">
<input type="radio" class='nyp-radio' name="nyp-suggested1" value="500" id="nyp-suggested-14" > $500
</label>
</div>
<label for="nyp">
Other ( $ ) </label>
<input id="nyp" name="nyp" type="text" value="0.00" title="nyp" class="input-text amount nyp-input text">
</div>
关于javascript - 选择最接近的输入来调整值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52608615/