Question

我有一个包含重复元素集的表单。

如果选择类credit_req_select更改，我想要显示/隐藏，并且可能只清除 下一个文本输入，使用类credit_line_text。

下面的change（）函数找不到文本字段，我认为它必须与我使用$(this)的方式有关。

获取这些文本字段的正确方法是什么？

我的HTML

<p class="file_info">*Credit Required: 
    <select name='default_credit_requirements' id='default_credit_requirements' class="credit_req_select">
<option></option>
<option value='1' selected>Do not include</option>
<option value='2' >Include if able</option>
<option value='3' >Must include</option>
</select>
    </p>
    <p class="file_info">
      <label>*Credit Line:
        <input  type="text" name="default_credit_line" id="default_credit_line" class="credit_line_text" value="" />
      </label>
    </p>

我的功能看起来像这里的答案Jquery next adjacent selector with $(this)

$('.credit_req_select').change(function() {
    if(this.value > 1) {    
        $(this).next(".credit_line_text").show();
        console.log($(this).next(".credit_line_text").attr('id'));
    } else {
        $(this).next(".credit_line_text").val('');
        $(this).next(".credit_line_text").hide();   
    }
});

我也尝试过这个答案jquery next() returning nothing

$('.credit_req_select').change(function() {
    if(this.value > 1) {    
        $(this).nextUntil(".credit_line_text").show();
        console.log($(this).nextUntil(".credit_line_text").attr('id'));
    } else {
        $(this).nextUntil(".credit_line_text").val('');
        $(this).nextUntil(".credit_line_text").hide();  
    }
});

还尝试将其分配给var jQuery $(this).next() not working as expected

Answer 1

试试这个 -

$(this).closest('p.file_info').next().find(".credit_line_text")

由于您的输入已经有一个ID default_credit_line，并且Id应该是唯一的，您可以使用它。

$('#default_credit_line').val("");

Answer 2

你应该做的是将每个repeating set of elements包装成某种东西。例如，div类element。然后您的选择查询将更容易阅读。

$(this).closest('.element').find(".credit_line_text")

jQuery next（）with $（this）

2 个答案: