Блог

Главная - Вопросы по программированию - Как сделать так, чтобы один и тот же раздел HTML открывался в одном div и закрывался в другом div

Как сделать так, чтобы один и тот же раздел HTML открывался в одном div и закрывался в другом div

#jquery

#jquery

Вопрос:

У меня есть этот HTML с помощью Jquery 

 <html>
  <head>
  <script type="text/javascript" src="js/accordian/jquery-1.9.1.js">
  </script>
  <script type="text/javascript">


$(document).on("click", ".checkboxclas", function(e) {
   $(".Topping-details").hide();
  var divdata = $("div.activateUiHTML").html();
   $("#ordersdiv").prepend(divdata);
  });


 </script>
</head>

<body>
   <div  class="activateUiHTML"  data-role="collapsible">
   <div class="prd-items-detials">
      <form><input type="checkbox" class="checkboxclas" name="checkbox-mini-0" id="59" > 
         <label class="testtt" for="checkbox-mini-0">Ice Cream Butter Scotch</label> 
      </form>
      <div class="Topping-details" id="59">
         <section id="topping_tsection_59">
            <i id="topping-close"></i>
            <aside>
               <section class="secclass"><a href="#">Honey with Chocolate Sauce  10 ML</a></section>
            </aside>
         </section>
      </div>
   </div>
   </div>
   <div id="ordersdiv"></div>
</body>

</html>

При нажатии на флажок у меня есть прослушиватель, в котором я добавляю данные в div с именем ordersdiv

Я поражен в одном месте.

Когда я нажимаю на флажок, я хочу скрыть html, присутствующий внутри класса Topping-details, когда он добавляется в ordersdiv, и он не должен быть закрыт в activateUiHTML div

Прямо сейчас, когда я использовал $(".Topping-details").hide(); его, он скрывается в обоих div.

может кто-нибудь, пожалуйста, помочь мне, как решить это??

Ответ №1:

Рабочая демонстрация

Вам нужен другой селектор, чтобы спрятаться .Topping-details внутри #ordersdiv

Используйте $("#ordersdiv .Topping-details").hide(); после добавления html.

Попробуйте это,

 $(document).on("click", ".checkboxclas", function(e) {


    var divdata = $("div.activateUiHTML").html();


    $("#ordersdiv").prepend(divdata);
    $("#ordersdiv .Topping-details").hide();

});

Примечание :

Ваше добавление html генерирует флажки с дублированным идентификатором.

Комментарии:

1. Обратите внимание, что вы также изменили привязку, чтобы любые совпадающие .checkboxclas элементы, добавленные в DOM после этого запуска, не вызывали этот обработчик. Возможно, OP использовался .on() по какой-то причине.

2. Ооо, спасибо, что указали на это, я только что заметил id="59" в разметке OPs

3. Хороший улов на id дубликатах в коде OP, я этого не заметил. Но я все же рекомендую не менять селектор привязки таким образом. Почему бы не использовать ту же делегированную привязку, которую использовал OP? Была ли причина, по которой вы его изменили?

4. Упс, еще раз извините, я просто копировал код из своей скрипки. Делегирование является наиболее важным в этом случае. Глупые ошибки

5. Это сработало, большое вам спасибо за объяснение. это очень помогло .

Ответ №2:

Если я правильно понимаю, вы хотите скрыть только «Topping-details» div , которые являются дочерними элементами «ordersdiv» div ? Если это так, вы можете просто использовать оба из них в селекторе:

 $("#ordersdiv .Topping-details").hide();

Это скроет только элементы с классом «Topping-details», только если они также являются дочерними элементами элемента «ordersdiv».