Question

我有以下两个div元素：

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

加载页面时，使用jQuery删除了名为'geolocation-common-map'的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

尝试使用toggle（）而不是remove（）：

valueFormatString: " $ ##, ###, ###, # 0"

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>

在您的静态div中添加id或将jquery中的id更改为class即可完成您的工作。您使用staticMap作为id，但未在div中定义。

单击时加载已删除的div元素

3 个答案: