javascript - 如何在另一个不同样式的div中正确显示选中的属性？

Question

我对 jQuery 很陌生。代码的第一部分是检查输入，检查后应按以下格式显示检查的项目。如何在 jquery 的帮助下做到这一点。

<ul class="approval approval_scrolltab mt-3">
  <li>
    <div class="approval--member">
      <img src="assets/images/user.jpg" class="user--image" />
      <div class="w-100">
        <h6 class="approval--name">Name</h6>
        <p>Initiator</p>
      </div>
      <div class="form-group">
        <div class="checkbox">
          <input name="one" type="checkbox" id="one" />
          <label for="one"></label>
        </div>
      </div>

    </div>
  </li>
</ul>

检查后应该以这种格式显示。

<div class="col-xl-6 col-lg-6 col-md-6 offset-xl-1">
  <h6 class="heading--form mb-2 mt-3 mt-sm-0">
    User
  </h6>
  <ul class="approval approval_scrolltab mt-3">
    <li>
      <div class="approval--member">
        <img src="assets/images/user.jpg" class="user--image" />
        <div class="w-100">
          <h6 class="approval--name">Name</h6>
          <p>Initiator</p>
        </div>
        <a href="">
          <span class="ic-close"></span>
        </a>

      </div>
    </li>
  </ul>
</div>

我尝试了这样的方法。它对于名称工作得很好，但不知道如何显示附有名称的用户图像，而且名称附近还有一个取消图标。我只能用这个显示名称代码。

<script>
  $('input[type="checkbox"]').on('change', function () {
    var name = $(this).attr('data-name');
    var image = $(this).attr('data-image');

    if ($(this).prop('checked')) {
      $('#checked-names').append('<p data-name="' + name + '">' + name + '</p>');
      $('#checked-images').append("<img src='image'")
    } else {
      $('#checked-names p[data-name="' + name + '"]').remove();
      $('#checked-images').remove()
    }
  });
</script>

更新通过这个关闭按钮，我想从已检查列表中删除它(效果很好)，并且我想从已检查的输入中取消选中它。

 $('body').on('click', '.ic-close', function() {
    $(this).closest('li').remove()
    $(this).closest('li').prop('checked',false) #didn't worked
  });

Answer 1

下面的这个脚本可能对您有帮助。我仅向用户列表添加了一个 ID，并从 HTML 中的关闭按钮中删除了 a 标记。 JavaScript 将您想要的 HTML 以及 name 和 image 添加到列表中。如果您单击关闭范围，该项目将被删除。

更新:要通过关闭其用户列表项来取消选中该复选框，您必须向该复选框添加一个类似 data-name="Initiator" 的属性。在 JavaScript 中，如果已将两行代码添加到 ic-close 项 的 click 监听器 中，请参见下文。

$('input[type="checkbox"]').on('change', function() {
  var image_url = $(this).closest( '.approval--member' ).find( 'img' ).attr('src');
  var name = $(this).closest( '.approval--member' ).find( '.approval--name ~ p' ).text();

  if($(this).prop('checked')) {

    $('ul#user-list').append(
    '<li id="' + name + '">' +
      '<div class="approval--member">' +
        '<img src="' + image_url + '" class="user--image" />' +
        '<div class="w-100">' +
          '<h6 class="approval--name">Name</h6>' +
          '<p>' + name + '</p>' +
        '</div>' +
        '<span class="ic-close">Close</span>' +
      '</div>' +
    '</li>');

  } else {
    $('ul#user-list #' + name).remove();
  }

  $('body').on('click', '.ic-close', function() {
    var name = $(this).closest('li').find('.approval--name ~ p' ).text();
    $('input[data-name="' + name + '"]').prop( "checked", false );

    $(this).closest('li').remove();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="approval approval_scrolltab mt-3">
  <li>
    <div class="approval--member">
      <img src="assets/images/user.jpg" class="user--image" />
      <div class="w-100">
        <h6 class="approval--name">Name</h6>
        <p>Initiator</p>
      </div>
      <div class="form-group">
        <div class="checkbox">
          <input data-name="Initiator" name="one" type="checkbox" id="one" />
          <label for="one"></label>
        </div>
      </div>

    </div>
  </li>
</ul>

<div class="col-xl-6 col-lg-6 col-md-6 offset-xl-1">
  <h6 class="heading--form mb-2 mt-3 mt-sm-0">
    User
  </h6>
  <ul id="user-list" class="approval approval_scrolltab mt-3">
  </ul>
</div>