使用Jquery遍历DOM来查找输入并根据数据属性修改值

Question

我有一个表单，它有一个价格输入，我想根据它下面的选项进行修改。

所以，当有人点击<a class="price_option" data-price="xxx" ... >，数据价格的值将被输入到输入尊域（<input class="form-control price_dozen" ...）

下面是HTML代码。有人可以帮忙吗？

<div class="form-group"> 
     <label for="price_dozen">Price (Dozen)</label> 
     <div class="input-group col-xs-7"> 
      <input class="form-control price_dozen" type="text" value="300"> 
      <div class="input-group-addon">/ lusin</div> 
     </div> 
     <a class="price_option" data-price="250" href="#">250</a> , <a class="price_option" href="#">300</a> , <a href="#" class="price_option">320</a> 
    </div> 

    <div class="form-group"> 
     <label for="price_dozen">Price (Dozen)</label> 
     <div class="input-group col-xs-7"> 
      <input class="form-control price_dozen" type="text" value="300"> 
      <div class="input-group-addon">/ lusin</div> 
     </div> 
     <a class="price_option" data-price="250" href="#">250</a> , <a class="price_option" href="#">300</a> , <a href="#" class="price_option">320</a> 
    </div> 

    <div class="form-group"> 
     <label for="price_dozen">Price (Dozen)</label> 
     <div class="input-group col-xs-7"> 
      <input class="form-control price_dozen" type="text" value="300"> 
      <div class="input-group-addon">/ lusin</div> 
     </div> 
     <a class="price_option" data-price="250" href="#">250</a> , <a class="price_option" href="#">300</a> , <a href="#" class="price_option">320</a> 
    </div> 

Answer 1

试试这个

$(function(){ 
    $(".price_option").on("click",function(e){ 
    $(this).prev().find(".form-control").val($(this).attr("data-price")); 
    }); 
}); 

但作为建议你应该尝试使用非常简单没有废话jQuery方法对自己的穿越。 PS：根据您的具体要求进行修改。