选择最接近的输入来调整值

Question

我有 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;

上下文中的完整 sn-p

<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 来调整值。

Answer 1

试试这个代码

$(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>

Answer 2

您可能遇到的问题是 3 个“输入框”包含具有相同 ID 的输入（基本上您有 nyp-suggested-1 3 次）。您应该尝试生成不同的 ID，为每个组保持相同的名称，但组之间不同 - 示例：

组1：

        <label for="nya1">
            <input type="radio" name="nya" value="20" id="nya1" > $20
        </label>
        <label for="nya2">
            <input type="radio" name="nya" value="50" id="nya2" > $50
        </label>
        <label for="nya3">
            <input type="radio" name="nya" value="100" id="nya3" > $100
        </label>
        <label for="nya4">
            <input type="radio" name="nya" value="500" id="nya4" > $500
        </label>  

第 2 组：

    <label for="nyb1">
            <input type="radio" name="nyb" value="20" id="nyb1" > $20
        </label>
        <label for="nyb2">
            <input type="radio" name="nyb" value="50" id="nyb2" > $50
        </label>
        <label for="nyb3">
            <input type="radio" name="nyb" value="100" id="nyb3" > $100
        </label>
        <label for="nyb4">
            <input type="radio" name="nyb" value="500" id="nyb4" > $500
        </label>               

然后你可以在jquery中根据组名进行选择并使用相同的值进行更新。