按一下载入移除的div元件

Question

我有两个div元素：

<div class='staticMap'></div>
<div class='geolocation-common-map'></div>

在加载页面时，使用jQuery删除名为“地理定位-公共映射”的div。我想知道如何在点击div 'staticMap‘之后再次加载这个div。到目前为止，我已经跟踪了jQuery，但是我需要替换.show()函数。

$('.geolocation-common-map').remove();
$('.staticMap').on("click", function(event) {
   $('.geolocation-common-map').show();
   $('.staticMap').remove();
   event.preventDefault();
});

有什么办法吗？

提前谢谢你。

Answer 1

根据detach documentation

.detach()方法与.remove()相同，但.detach()保存与已删除元素关联的所有jQuery数据。当删除的元素稍后重新插入DOM时，此方法非常有用。

您可以使用它如下：

​

var dv_geolocation_common_map = $( ".geolocation-common-map" ).detach();
var dv_staticMap = $('.staticMap');

$('.staticMap').on("click", function(event) {
  dv_geolocation_common_map.insertAfter(dv_staticMap)
   dv_staticMap.detach();
   event.preventDefault();
});

.staticMap{
width:100px;
height:100px;
background-color:green;
}
.geolocation-common-map{
width:100px;
height:100px;
background-color:red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='staticMap'></div>
<div class='geolocation-common-map'></div>

​

Answer 2

与其删除()，不如尝试切换()：

<div class='staticMap'></div>
<div class='geolocation-common-map'></div>
<script>
$(document).ready(function() {
  $('.geolocation-common-map').hide();
  $('.staticMap').on("click", function (event) {
    $('.geolocation-common-map').toggle();
  });
});
</script>

Answer 3

​

<!DOCTYPE html>
<html>
<head>
<title>Try jQuery Online</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
   $('#geolocation').hide();
    $("#staticMap").click(function(){
       $('#geolocation').show();
    });
    
   
});

</script>
<style>
.selected { 
    color:red; 
}
.highlight { 
    background:yellow; 
}

</style>
</head>
<body>
<div id="staticMap" class='staticMap selected'>Static Map</div>
<div id="geolocation" class='geolocation-common-map highlight'>Geolocation Map</div>
    
</body>
</html>

​

将id添加到静态div或在jquery中将id更改为类将使work.you使用staticMap作为id，但在div中没有定义它。