Как скопировать изображение из одного div в другой div по идентификатору изображения - PullRequest
Новая
       75

Как скопировать изображение из одного div в другой div по идентификатору изображения

0 голосов
/ 03 апреля 2020

У меня 3 вкладки. На первой вкладке есть ссылка, которая открывает вторую вкладку. На второй вкладке есть серия изображений. Я пытаюсь достичь, когда пользователь нажимает на любое из изображений на второй вкладке, это изображение копируется обратно в div, где пользователь впервые щелкнул, чтобы открыть эту вкладку. Все, что я пробовал до сих пор, провалилось. Мне нужно знать идентификатор кликаемого изображения и скопировать это изображение. Если пользователь затем щелкнет другое изображение, оно скопирует и это. 

<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>

1 Ответ

1 голос
/ 03 апреля 2020

Я предполагаю, что вы используете вкладки 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>
...