0

我在下面包含了我的项目。

我的问题是中继器中的选择更改同时发生了变化。我希望每个中继器自己运行。我需要这方面的帮助。

$('.sare-fields').change(function() {
  var select = $(this).attr("id");
  var option_val = $(this).val();
  var current = $('.data-fields[data-parent=' + select + '][data-sub=' + option_val + ']');
  $('.row').find('.data-fields[data-parent=' + select + ']').hide();
  current.show();
});


$(document).ready(function() {
  $(".repeater").repeater({
    initEmpty: false,
    isFirstItemUndeletable: true,
    show: function() {
      $(this).slideDown();

      $(this)
        .find(".sare-fields")
        .change(function() {
          var select = $(this).attr("id");
          var option_val = $(this).val();
          var current = $(".data-fields[data-parent=" + select + "][data-sub=" + option_val + "]");
          $(".data-fields[data-parent=" + select + "]").hide();
          current.show();
        });
    },
    hide: function(deleteElement) {
      if (confirm("Are you sure you want to delete this element?")) {
        $(this).slideUp(deleteElement);
      }
    },
  });
});
<form method="POST" id="add-question">
  <div class="repeater">
    <div data-repeater-list="AddQuestion">
      <div data-repeater-item>
        <div class="row">
          <div class="col-md-3">
            <div class="sare-title">Question</div>
            <input type="text" name="question" placeholder="Question" value="" />
          </div>

          <div class="col-md-3">
            <div class="sare-title">Question Type</div>
            <select class="sare-fields" id="question_type" name="question_type">
              <option value="text">Text</option>
              <option value="listen" selected>Listen</option>
            </select>
          </div>
          
          <div class="data-fields col-md-3" data-parent="question_type" data-sub="listen">
            <div class="sare-title">Audio</div>
            <input type="text" name="audio" placeholder="Audio" value="" />
          </div>
          
  
          <div class="col-md-3">
            <div class="sare-title">Option Type</div>
            <select class="sare-fields" id="option_type" name="option_type">
              <option value="text" selected>Text</option>
              <option value="image">Image</option>
            </select>
          </div>
          <div class="data-fields col-md-3" data-parent="option_type" data-sub="text">
            <div class="sare-title">Option (A)</div>
            <input type="text" name="option_a" placeholder="Option (A)" value="" />
          </div>

          <div class="data-fields col-md-3" data-parent="option_type" data-sub="image">
            <div class="sare-title">Option Image (A)</div>
            <input type="text" name="option_image_a" placeholder="Option Image (A)" value="" />
          </div>

          <div class="col-md-3">
            <div class="sare-title">Correct Answer</div>
            <select class="sare-fields" id="correct_answer" name="correct_answer">
              <option value="a" selected>A</option>
              <option value="b">B</option>
            </select>
          </div>
          <div class="col-md-12">
            <button type="button" class="btn btn-danger btn-md" data-repeater-delete="">Delete</button>
          </div>
        </div>
      </div>
      <hr>
    </div>
    <input data-repeater-create type="button" class="btn btn-success btn-sm" value="Add More" /><br />
    <br />
    <input type="submit" name="submit" class="btn btn-primary" value="Submit" />
  </div>
</form>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.repeater/1.2.1/jquery.repeater.min.js"></script>

实际上，我的目标是使用 select 更改输入，这是我在每个框中的特定目标，但不幸的是，我无法使用这些代码实现这一点。

4

1 回答 1

0

您的代码中有两个主要问题。首先是您将id属性应用于动态克隆的元素。这将导致多个元素共享相同的id内容，这是无效的，并导致 UI 和 JS 出现问题。在这种情况下，您可以使用data属性将元数据与父元素一起存储，以将它们与其子元素相关联。

其次，jQuery.repeater 库已经过时了，实际上已经过时了 5 年，并且由于与 jQuery 3.x 不兼容而导致各种 UI 故障。我还要声明，库本身几乎完全是多余的，因为替换它的逻辑只是两个事件处理程序；一个用于添加内容，另一个用于删除它。尝试这个：

jQuery($ => {
  $(document).on('change', '.sare-fields', e => {
    let $select = $(e.target);
    let id = $select.data("id");
    let value = $select.val();

    let $container = $select.closest('.repeater');
    $container.find('.row .data-fields[data-parent=' + id + ']').hide();
    $container.find('.data-fields[data-parent=' + id + '][data-sub=' + value + ']').show();
  });

  // repeater functionality...
  $('.btn-add').on('click', e => {
    let $clone = $('.repeater').first().clone().hide();
    $clone.find(':text').val('');
    $clone.find('select option:first').prop('selected', true);
    $clone.insertAfter('.repeater:last').slideDown();
  });

  $(document).on('click', '.repeater .btn-delete', e => {
    if (confirm("Are you sure you want to delete this element?")) {
      $(e.target).closest('.repeater').slideUp(400, function() { $(this).remove() });
    }
  });
});
/* prevent removing the first section by hiding the delete button within it */
.repeater:first-of-type .btn-delete {
  display: none;
}
<form method="POST" id="add-question">
  <div class="repeater">
    <div class="row">
      <div class="col-md-3">
        <div class="sare-title">Question</div>
        <input type="text" name="question" placeholder="Question" value="" />
      </div>
      <div class="col-md-3">
        <div class="sare-title">Question Point</div>
        <input type="text" name="question_point" placeholder="Question Point" value="" />
      </div>
      <div class="col-md-3">
        <div class="sare-title">Question Type</div>
        <select class="sare-fields" name="question_type" data-id="question_type">
          <option value="text">Text</option>
          <option value="listen" selected>Listen</option>
        </select>
      </div>
      <div class="data-fields col-md-3" data-parent="question_type" data-sub="listen">
        <div class="sare-title">Audio</div>
        <input type="text" name="audio" placeholder="Audio" value="" />
      </div>
      <div class="col-md-3">
        <div class="sare-title">Question Detail</div>
        <textarea type="text" name="question_detail"></textarea>
      </div>
      <div class="col-md-3">
        <div class="sare-title">Option Type</div>
        <select class="sare-fields" name="option_type" data-id="option_type">
          <option value="text" selected>Text</option>
          <option value="image">Image</option>
        </select>
      </div>
      <div class="data-fields col-md-3" data-parent="option_type" data-sub="text">
        <div class="sare-title">Option (A)</div>
        <input type="text" name="option_a" placeholder="Option (A)" value="" />
      </div>
      <div class="data-fields col-md-3" data-parent="option_type" data-sub="text">
        <div class="sare-title">Option (B)</div>
        <input type="text" name="option_b" placeholder="Option (B)" value="" />
      </div>
      <div class="data-fields col-md-3" data-parent="option_type" data-sub="text">
        <div class="sare-title">Option (C)</div>
        <input type="text" name="option_c" placeholder="Option (C)" value="" />
      </div>
      <div class="data-fields col-md-3" data-parent="option_type" data-sub="text">
        <div class="sare-title">Option (D)</div>
        <input type="text" name="option_d" placeholder="Option (D)" value="" />
      </div>
      <div class="data-fields col-md-3" data-parent="option_type" data-sub="text">
        <div class="sare-title">Option (e)</div>
        <input type="text" name="option_e" placeholder="Option (e)" value="" />
      </div>
      <div class="data-fields col-md-3" data-parent="option_type" data-sub="image">
        <div class="sare-title">Option Image (A)</div>
        <input type="text" name="option_image_a" placeholder="Option Image (A)" value="" />
      </div>
      <div class="data-fields col-md-3" data-parent="option_type" data-sub="image">
        <div class="sare-title">Option Image (B)</div>
        <input type="text" name="option_image_a" placeholder="Option Image (B)" value="" />
      </div>
      <div class="data-fields col-md-3" data-parent="option_type" data-sub="image">
        <div class="sare-title">Option Image (C)</div>
        <input type="text" name="option_image_c" placeholder="Option Image (C)" value="" />
      </div>
      <div class="data-fields col-md-3" data-parent="option_type" data-sub="image">
        <div class="sare-title">Option Image (D)</div>
        <input type="text" name="option_image_d" placeholder="Option Image (D)" value="" />
      </div>
      <div class="data-fields col-md-3" data-parent="option_type" data-sub="image">
        <div class="sare-title">Option Image (E)</div>
        <input type="text" name="option_image_e" placeholder="Option Image (E)" value="" />
      </div>
      <div class="col-md-3">
        <div class="sare-title">Correct Answer</div>
        <select class="sare-fields" name="correct_answer" data-id="correct_answer">
          <option value="a" selected>A</option>
          <option value="b">B</option>
          <option value="c">C</option>
          <option value="d">D</option>
          <option value="e">E</option>
        </select>
      </div>
      <div class="col-md-12">
        <button type="button" class="btn btn-danger btn-md btn-delete">Delete</button>
      </div>
    </div>
    <hr>
  </div>
  <input type="button" class="btn btn-success btn-sm btn-add" value="Add More" /><br /><br />
  <input type="submit" name="submit" class="btn btn-primary" value="Submit" />
</form>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

于 2021-05-19T13:08:58.143 回答