如何通過圖像 ID 將圖像從一個 div 復制到另一個 div

Question

我有 3 個標簽。 第一個選項卡上是打開第二個選項卡的鏈接。 第二個選項卡有一系列圖像。 我想要實現的是，當用戶單擊第二個選項卡中的任何圖像時，該圖像被復制回用戶第一次單擊以打開此選項卡的 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>