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 充当更大图像容器的缩略图锚。 所以当点击 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>