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

Question

I have 3 tabs. On the first tab is a link that opens the second tab. The second tab has a series of images. What I am trying to achieve is when a user clicks on any of the images in the second tab, that image is copied back to the div where the user first clicked to open this tab. Every thing I have tried so far has failed. I need to know the id of the clicked image and copy this image. If the user then clicks another image it would copy that one as well.

<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

I'm assuming you're using jQueryUI's tabs.

If so, fix your html structure because it does not comply with that libraries proposed structure.

All tou have to do is clone the clicked image into the desired 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>