Question

我有div＆lt; \ select＆gt;落下。如果我选择限制它从下拉菜单打开一个div与输入，它工作正常。

我还添加了一个链接 +添加新，然后点击 +添加新，使用＆lt; \ select＆gt;创建新 div下拉应该和以前一样工作但是当我从新下拉菜单中选择限制时它会影响前一个下拉菜单。我怎样才能使它只为我正在工作的div打开，并且不会影响其他div，而不会产生多少我创造的数量。

JS FIDDLE

HTML

<div class="wrapper">
 <div class="row">   
    <select class="optionSelector">
        <option>-Select-</option>
        <option value="limited">Limited</option>
        <option>Unlimited</option>
     </select>

    <div class="limited" > 
        <input type="number">
     </div>
  </div>      
</div>

Jquery的

$('.add').click(function() {
 $(".wrapper").append('<div class="row"><select class="optionSelector"><option>-Select-</option><option value="limited">Limited</option><option>Unlimited</option></select><div class="limited" ><input type="number"></div></div>');
});

$(".wrapper").on('change', '.optionSelector', function(){
       $('.limited').hide();
       $('.' + $(this).val()).show();     
});

Answer 1

您可以使用.siblings()仅获取其旁边的下拉列表

<强> demo

$(".wrapper").on('change', '.optionSelector', function () {
    $(this).siblings('.limited').hide();
    $(this).siblings('.' + $(this).val()).show();
});

Answer 2

$('.limited')选择器获取类.limited的所有元素。

jQuery使用append方法问题从select选项中切换div

2 个答案: