找到最接近的输入框并设置值。

Question

在选择值发生改变时，我想通过class查找最近的输入框并更改其值。

JS

<script type="text/javascript" charset="utf-8">
    $(document).ready(function(){

        $('#doc_service').on('change', function (){

            $.getJSON('\/services\/search-service', {id: $(this).val()}, function(data){

                $(this).closest('.price').val(data);

               //$('.price').val(data);


            });
        });
    });
</script>

我的代码 $(this).closest('.price').val(data); 没有改变数值，我尝试使用 $('.price').val(data); 它可以工作，但我有很多输入框，只想改变最近的一个。 结构是 表格

HTML

<tr>
    <td>
        <select id="doc_service">
            <option value="volvo">Volvo</option>
            <option value="saab">Saab</option>
            <option value="mercedes">Mercedes</option>
            <option value="audi">Audi</option>
        </select>
    </td>
    <td>
        <input type="text" class="price">
    </td>
</tr>
<tr>
    <td>
        <select id="doc_service">
            <option value="volvo">Volvo</option>
            <option value="saab">Saab</option>
            <option value="mercedes">Mercedes</option>
            <option value="audi">Audi</option>
        </select>
    </td>
    <td>
        <input type="text" class="price">
    </td>
</tr>

- Wizard

---

你需要提供HTML代码。closest()方法用于选择父元素，这可能不是你想要做的事情。 - Boaz

“this” 不是指 “#doc_service”，因为您在 jQuery 代码块内。如果您想了解更多信息，可以参考这篇文章 -> http://blog.millermedeiros.com/avoiding-the-this-keyword-on-jquery/ - Mohammed Joraid

Answer 1

this在你的代码中并不指向被改变的元素，你需要缓存该对象。同时注意closest方法只会选择最近的匹配父元素。

$('#doc_service').on('change', function (){
    var _this = this;
    $.getJSON('\/services\/search-service', {id: this.value }, function(data) {
        $(_this).closest('td').next().find('.price').val(data);
    });
});

每个ID必须是唯一的，$('#doc_service') 只会选择第一个匹配的元素，这种情况下应该使用类(class)。

- Ram

---

我很难相信 OP 把一个输入字段作为 '#doc_service' 元素的祖先。 - Boaz

@Boaz 是的，当然。输入不能有后代元素。没有注意到。谢谢。 - Ram

现在我们有了标记，原帖和答案变得更加清晰明了。 - Boaz