根据重复项目中的选定下拉选项隐藏/显示Div

Question

到目前为止，我已经使用以下代码实现了单个元素：

    <div class="form-group">
     <label class="control-label">Service</label>
     <select class="form-control select2 service">
      <option>Select Service</option>
      <optgroup label="Services">
       <option value="service1">Service 1</option>
       <option>Service 2</option>
       <option>Service 3</option>
       <option value="special">Special</option>
      </optgroup>
     </select>
    </div>

    <div class="hidden-input">
     <div class="col-sm-8">
      <div class="form-group">
       <label class="control-label">Description</label>
        <textarea class="form-control" name="customDesc" rows="2">
        </textarea>
      </div>
     </div>
    </div>

    <script>
    $('.service').on('change', function () {
        var $this = $(this),
            value = $this.val();

        if (value == 'special') {
            $('.hidden-input').fadeIn(350);
        } else {
            $('.hidden-input').fadeOut(250);
        }
    });
</script>

问题在于重复了服务类选择，show-hidden div也是如此，当在下拉列表中选择第一个“value = special”值时，这会显示/隐藏所有“hidden-input”元素。 / p>

我试图在show repback中实现相同的代码，目标是重复元素的实例，以隐藏或显示重复项目中的隐藏元素，但没有运气：

// For service repeater
    $('.repeater').repeater({

        show: function () {
            $(this).slideDown();
            $(this).find('.select2-multiple').select2({
                placeholder: "Select Title",
                allowClear: true,
            });
            $(this).find('.select2').select2({
                placeholder: "Select Title",
                allowClear: true,
            });
            $(this).find('.service').on('change', function () {
                var $this = $(this),
                    value = $this.val();

                if (value == 'special') {
                    $('.hidden-input').fadeIn(350);
                } else {
                    $('.hidden-input').fadeOut(250);
                }
            });
        },
        hide: function (deleteElement) {
            if (confirm('Are you sure you want to delete this element?')) {
                $(this).slideUp(deleteElement);
            }
        }
    });

有什么建议吗？

Answer 1

根据hidden-input更改，我最好的猜测是帮助定位正确的select;

1. 使用closest
将DOM升级到最近的form-group
2. 转到下一个hidden-input
的DOM项目
3. 切换。
＆＃13;
＆＃13;
$('.service').on('change', function() {
  var $this = $(this),
    value = $this.val();
  var $target = $this.closest(".form-group").next(".hidden-input"); //best guess on provided info
  if (value == 'special') {
    $target.fadeIn(350);
  } else {
    $target.fadeOut(250);
  }
});
＆＃13;
.hidden-input{
  display: none;
}
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
  <label class="control-label">Service</label>
  <select class="form-control select2 service">
      <option>Select Service</option>
      <optgroup label="Services">
       <option value="service1">Service 1</option>
       <option>Service 2</option>
       <option>Service 3</option>
       <option value="special">Special</option>
      </optgroup>
     </select>
</div>

<div class="hidden-input">
  <div class="col-sm-8">
    <div class="form-group">
      <label class="control-label">Description</label>
      <textarea class="form-control" name="customDesc" rows="2">
        </textarea>
    </div>
  </div>
</div>

<div class="form-group">
  <label class="control-label">Service</label>
  <select class="form-control select2 service">
      <option>Select Service</option>
      <optgroup label="Services">
       <option value="service1">Service 1</option>
       <option>Service 2</option>
       <option>Service 3</option>
       <option value="special">Special</option>
      </optgroup>
     </select>
</div>

<div class="hidden-input">
  <div class="col-sm-8">
    <div class="form-group">
      <label class="control-label">Description</label>
      <textarea class="form-control" name="customDesc" rows="2">
        </textarea>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;