javascript - Jquery CSS 在另一个容器中单击时显示当前 div

Question

我有这个 html。

    <div class="row">
        <div class="col-lg-6" style="float:left">
        <div class="col-lg-3">
        <div id='rm-a'>
            <div class="room-canvas">
            <div class="tp1-rm-a" style='background-image:url(http://iaz.example.com/Template1.jpg);'>
            <div class="pimg" style=' background-image:url(<?php echo "http://iaz.example.com/pub/media/catalog/product".$this->getProduct(); ?>);'>rm-1</div>
            </div></div></div>
        
            <div id='rm-b'>
            <div class="room-canvas">
            <div class="tp1-rm-a" style='background-image:url(http://iaz.example.com/Template1.jpg);'>
            <div class="pimg" style="background-image:url(<?php echo 'http://iaz.example.com/pub/media/catalog/product'.$this->getProduct(); ?>);">rm-b</div>
            </div></div></div>
                                
            <div id='rm-c'>
            <div class="room-canvas">
            <div class="tp1-rm-a" style='background-image:url(http://iaz.example.com/Template1.jpg);'>
            <div class="pimg" style="background-image:url(<?php echo 'http://iaz.example.com/pub/media/catalog/product'.$this->getProduct(); ?>);">rm-c</div>
            </div></div></div>                            
       
    
         </div>
        <div class="col-lg-6"></div>  //container
        </div>

我希望实现的是:div类rm-a , rm-b和 rm-c充当更大图像容器的缩略图 anchor 。所以当 div rm-a被点击，

相同的div将被复制到容器中 <div class="col-lg-6"></div>

当rm-b单击它将替换为 rm-b在容器中。

我试了一下，还在 https://www.w3schools.com/howto/howto_js_tab_img_gallery.asp 找到了一个例子

但是它处理图像和 src，而在我的例子中它是所有带有背景图像的 div，不知何故不能正确地使用它们。

我在 JSfiddle 的代码链接是 - https://jsfiddle.net/yoc9qvrb/12/

Answer 1

您可以使用 clone()复制 div 的内容并使用 html()您可以更新目标 div 中的内容。

$('#rm-a,#rm-b,#rm-c').click(function(){
  var target = $(this).parent().next();
  target.html('');
  var copiedDiv = $(this).clone();
  target.html(copiedDiv);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
    <div class="col-lg-6" style="float:left">
    <div class="col-lg-3">
        <div id='rm-a'>
        <div class="room-canvas">
        <div class="tp1-rm-a" style='background-image:url(http://iaz.example.com/Template1.jpg);'>
        <div class="pimg" style=' background-image:url(<?php echo "http://iaz.example.com/pub/media/catalog/product".$this->getProduct(); ?>);'>rm-1</div>
        </div></div></div>

        <div id='rm-b'>
        <div class="room-canvas">
        <div class="tp1-rm-a" style='background-image:url(http://iaz.example.com/Template1.jpg);'>
        <div class="pimg" style="background-image:url(<?php echo 'http://iaz.cubereach.com/pub/media/catalog/product'.$this->getProduct(); ?>);">rm-b</div>
        </div></div></div>

        <div id='rm-c'>
        <div class="room-canvas">
        <div class="tp1-rm-a" style='background-image:url(http://iaz.example.com/Template1.jpg);'>
        <div class="pimg" style="background-image:url(<?php echo 'http://iaz.cubereach.com/pub/media/catalog/product'.$this->getProduct(); ?>);">rm-c</div>
        </div></div></div>                            


     </div>
    <div class="col-lg-6"></div>  //container
    </div>
<div class="row">
    <div class="col-lg-6" style="float:left">
    <div class="col-lg-3">
    <div id='rm-a'>
        <div class="room-canvas">
        <div class="tp1-rm-a" style='background-image:url(http://iaz.example.com/Template1.jpg);'>
        <div class="pimg" style=' background-image:url(<?php echo "http://iaz.example.com/pub/media/catalog/product".$this->getProduct(); ?>);'>rm-1</div>
        </div></div></div>

        <div id='rm-b'>
        <div class="room-canvas">
        <div class="tp1-rm-a" style='background-image:url(http://iaz.example.com/Template1.jpg);'>
        <div class="pimg" style="background-image:url(<?php echo 'http://iaz.cubereach.com/pub/media/catalog/product'.$this->getProduct(); ?>);">rm-b</div>
        </div></div></div>

        <div id='rm-c'>
        <div class="room-canvas">
        <div class="tp1-rm-a" style='background-image:url(http://iaz.example.com/Template1.jpg);'>
        <div class="pimg" style="background-image:url(<?php echo 'http://iaz.cubereach.com/pub/media/catalog/product'.$this->getProduct(); ?>);">rm-c</div>
        </div></div></div>                            


     </div>
    <div class="col-lg-6"></div>  //container
    </div>
<div class="row">
    <div class="col-lg-6" style="float:left">
    <div class="col-lg-3">
        <div id='rm-a'>
        <div class="room-canvas">
        <div class="tp1-rm-a" style='background-image:url(http://iaz.example.com/Template1.jpg);'>
        <div class="pimg" style=' background-image:url(<?php echo "http://iaz.example.com/pub/media/catalog/product".$this->getProduct(); ?>);'>rm-1</div>
        </div></div></div>

        <div id='rm-b'>
        <div class="room-canvas">
        <div class="tp1-rm-a" style='background-image:url(http://iaz.example.com/Template1.jpg);'>
        <div class="pimg" style="background-image:url(<?php echo 'http://iaz.cubereach.com/pub/media/catalog/product'.$this->getProduct(); ?>);">rm-b</div>
        </div></div></div>

        <div id='rm-c'>
        <div class="room-canvas">
        <div class="tp1-rm-a" style='background-image:url(http://iaz.example.com/Template1.jpg);'>
        <div class="pimg" style="background-image:url(<?php echo 'http://iaz.cubereach.com/pub/media/catalog/product'.$this->getProduct(); ?>);">rm-c</div>
        </div></div></div>                            


     </div>
    <div class="col-lg-6"></div>  //container
    </div>