如何通过图像 ID 将图像从一个 div 复制到另一个 div

Question

我有 3 个选项卡。在第一个选项卡上是 link 打开第二个选项卡。第二个选项卡有一系列图像。我想要实现的是，当用户单击第二个选项卡中的任何图像时，该图像将被复制回用户首次单击以打开此选项卡的 div。到目前为止我尝试过的每一件事都失败了。我需要知道被点击图片的 ID 并复制这张图片。如果用户随后单击另一张图片，它也会复制那张图片。

<div id="demoTabs">
    <ul>
        <li><a href="#bike">Bike</a></li>
        <li><a href="#coach">Coach</a></li>
        <li><a href="#truck">Truck</a></li>
    </ul>

<div id="coach">
    <div id="firstDiv">
        <img src="assets/img/english/calltoadventure.png" id="imgone" class="theImage" value="Copy"/> 
        <br>
        <img src="assets/img/english/cinemastudies.png" id="imgtwo" class="theImage" value="Copy"/>
    </div>
    <div id="myDiv">
        <img src="assets/img/english/calltoadventure.png" id="img19" class="theImage" value="Copy"/> 
        <br>
        <img src="assets/img/english/cinemastudies.png" id="img20" class="theImage" value="Copy"/>
    </div>
</div>

<div id="bike">
    <div id="secondDiv">
        <a href="#coach" class="open-tab" data-tab-index="1">
        <img src="assets/img/bike.png" id="english"/></a></div>
    </div>  

    <div id="truck"><img src="assets/img/truck.jpg"/></div>

</div>

</body>
<script>
$(document).ready(function() {
    var $selectedOption =""; //the option user clicks on which determins which tab to open
    var $theDiv = "";        // the div where the image to copy resides
    var $thecallingDiv = ""; // the div where the image is to be placed
    var $selectedImage = ""; // the image the user selects

    $('#demoTabs').tabs({ active: 0 });

    $('.open-tab').click(function (event) {
        $selectedOption = $(this).children('img').attr('id');
        $thecallingDiv = $(this).closest('div').attr('id');

        $('#demoTabs').tabs("option", "active", $(this).data("tab-index"));
    });

    $("img.theImage").on("click",function() {  
        // get the id of the image selected
        $subjectImage = $(this).attr('id');

        // get the id of the closest div
        $theDiv = $(this).closest('div').attr('id');


        $($selectedImage).clone().attr('id',$selectedImage).append($thecallingDiv);

    }); 

</script>

Answer 1

我假设您正在使用 jQueryUI 的选项卡。

如果是这样，请修复您的 html 结构，因为它不符合图书馆建议的结构。

您所要做的就是将单击的图像克隆到所需的 div

$(document).ready(function() {
    const secondDiv = $('#secondDiv')

    $('#demoTabs').tabs({ active: 0 });

    $('.open-tab').click(function (event) {
      $('a[href="#coach"]').click()
    });

    $('#coach img').click(event => {
      secondDiv.append($(event.target).clone())
      console.log(`${$(event.target).attr('id')} copied to first tab`)
    });
});

img{cursor: pointer}

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css'/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script
  src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
  integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
  crossorigin="anonymous"></script>
  
<div id="demoTabs">
  <ul>
      <li><a href="#bike">Bike</a></li>
      <li><a href="#coach">Coach</a></li>
      <li><a href="#truck">Truck</a></li>
  </ul>
 <div id="bike">
      <div id="secondDiv">
          <a href="#" class="open-tab" data-tab-index="1">Open 2nd tab</a>
          <br>
          
      </div>
  </div>  
  
  <div id="coach">
      <div id="firstDiv">
          <img src="https://via.placeholder.com/50?text=1" id="imgone" class="theImage" value="Copy"/> 
          <br>
          <img src="https://via.placeholder.com/50?text=2" id="imgtwo" class="theImage" value="Copy"/>
      </div>
      <div id="myDiv">
          <img src="https://via.placeholder.com/50?text=3" id="imgthree" class="theImage" value="Copy"/> 
      </div>
  </div>
  <div id="truck"></div>

  </div>

如何通过图像 ID 将图像从一个 div 复制到另一个 div

How do I copy an image from one div to another div by the image ID

jquery

copy

image

jquery-ui-tabs