Загружать удаленный элемент div по клику

У меня есть два следующих элемента div:

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

Div с именем 'геолокация-общая-карта' удаляется с помощью jQuery при загрузке страницы. Я хотел бы знать, как я могу снова загрузить этот div после нажатия div 'статическая карта'. Пока у меня есть следующий jQuery, но мне нужно заменить функцию .показывать().

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

Любые идеи, как это сделать?

Заранее спасибо.

В чем твоя проблема? Код выглядит хорошо для меня. Только не удаляйте .geolocation-common-map, а скройте его, как вы это делаете во фрагменте кода.

— 14.03.2019 14:29

@mplungjan Я не хочу, чтобы div загружался даже в HTML, поэтому показать/скрыть — это не то, что мне нужно.

— 14.03.2019 14:30

Так где же ваш код для загрузки .geolocation-common-map?

— 14.03.2019 14:31

почему бы вам не использовать hide() вместо remove()?

— 14.03.2019 14:41

javascript jquery html

14.03.2019 14:25

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Вместо remove() попробуйте toggle():

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

14.03.2019 14:30

<!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 или изменение идентификатора на класс в jquery сделает вашу работу. Вы используете staticMap как идентификатор, но он не определен в div.

14.03.2019 14:38

Ответ принят как подходящий

Согласно отделить документацию:

The .detach() method is the same as .remove(), except that .detach() keeps all jQuery data associated with the removed elements. This method is useful when removed elements are to be reinserted into the DOM at a later time.

Вы можете использовать его следующим образом:

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>

14.03.2019 14:39

Другие вопросы по теме

Отображение случайных чисел от бэкэнда к интерфейсу (браузеру) по одному или динамически

Html.ActionLink: всплывающее окно (настраиваемое), затем перенаправление

Запустить событие onChange для номера типа ввода с помощью Jquery

Вызов анонимной функции с помощью JQuery

Итерировать Gridview через jquery и генерировать вывод XML

Заменить повторение строки цифрой после запятой из двух цифр

Как постепенно появляться и исчезать с Vue

Ввод формы, показанный jquery, не публикуется при отправке - codeigniter

Как использовать всплывающее окно начальной загрузки в angular 7 с помощью jquery?

Получите значение из добавленного параметра селектора, используя JS/JQuery

Загружать удаленный элемент div по клику

Ответы 3

Другие вопросы по теме

Похожие вопросы