克隆适用于所有单击的元素，而不是此

Question

我需要将.selectedIcon的img克隆到单击的.icon中，然后如果单击另一个.icon，则仅需要编辑所选的.icon。我的解决方案会编辑所有单击的.icon。 .click（）是否可以解决此问题？

$(".icon").on("click", function() {
  let thisIcon = $(this);
  alert("icon clicked");
  $(".icons").fadeIn("slow");

  function imagePicker() {
    $(".iconSelect").on("click", function() {
      $(".selectedIcon").html("");
      $(this).clone().appendTo(".selectedIcon");
      $(thisIcon).html("");
      $(".selectedIcon img").clone().appendTo(thisIcon);
    })
  }
  imagePicker();
})

.icons {
  display: none;
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="panels">
  <div class="first hidden">
    <table>
      <tr>
        <td>
          <div class="icon 20iconA">A</div>
        </td>
      </tr>
      <tr>
        <td>
          <div class="icon 20iconB">B</div>
        </td>
      </tr>
    </table>
  </div>
</div>

<!--image picker -->
<div class="iconEditWrap">
  <div class="iconEdit">
    <div class="selectedIcon">
    </div>
    <div class="icons">
      <img class="iconSelect" alt="img1">
      <img class="iconSelect" alt="img2">
    </div>
  </div>
</div>

Answer 1

我认为这是您要完成的工作？您可以在点击内使用功能，该功能还将在您的旧选择上添加下一次点击事件。

let thisIcon;
$(".icon").on("click", function() {
  thisIcon = $(this);
  alert("icon clicked");
  $(".icons").fadeIn("slow");

  
  //imagePicker();
})

//function imagePicker() {
    $(".iconSelect").on("click", function() {
      $(".selectedIcon").html("");
      $(this).clone().appendTo(".selectedIcon");
      $(thisIcon).html("");
      $(".selectedIcon img").clone().appendTo(thisIcon);
    })
  //}

.icons {
  display: none;
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="panels">
  <div class="first hidden">
    <table>
      <tr>
        <td>
          <div class="icon 20iconA">A</div>
        </td>
      </tr>
      <tr>
        <td>
          <div class="icon 20iconB">B</div>
        </td>
      </tr>
    </table>
  </div>
</div>

<!--image picker -->
<div class="iconEditWrap">
  <div class="iconEdit">
    <div class="selectedIcon">
    </div>
    <div class="icons">
      <img class="iconSelect" alt="img1">
      <img class="iconSelect" alt="img2">
    </div>
  </div>
</div>