Jquery Span нажмите, чтобы найти следующий div

Я пытаюсь перенастроить класс div из диапазона, я пробовал

$(this).closest(".div").find(".list-type-demandes").toggle();

но это не работает.

если я использую:

$(".list-type-demandes").toggle();

это работает, но показывает мне два div, и мне нужно отобразить div из «этого» диапазона

здесь HTML:

<label style = "color: #1c5081">
        <span id = "toolbar-open" name = "toolbar_open" class = "toogle-toobar-open" onclick = "toogleListTypeDemande(this)"><b>+</b>
        </span> Organisation, support et services
      </label>

      <div class = "list-type-demandes" style = "padding-left: ; display: none">
         <label style = "display: inline">
         <input type = "radio" class = "checkbox_type_demande" data-appel-projet = "474" name = "appel_projet[type_demande_list]" value = "54" id = "appel_projet_type_demande_list_54"> Architecture d'entreprise
        </label>
      </div>

      <label style = "color: #1c5081">
        <span id = "toolbar-open" name = "toolbar_open" class = "toogle-toobar-open" onclick = "toogleListTypeDemande(this)"><b>+</b></span> Applications
      </label>


      <div class = "list-type-demandes" style = "padding-left: ; display: none">
        <label style = "display: inline">
        <input type = "radio" class = "checkbox_type_demande" data-appel-projet = "474" name = "appel_projet[type_demande_list]" value = "52" id = "appel_projet_type_demande_list_52"> Système d'information activités recherche
        </label>
      </div>

вот скрипт:

function toogleListTypeDemande(element) {
        $(this).closest(".div").find(".list-type-demandes").toggle();
    }

Что вы имеете в виду под the div from "this" span?

— 28.05.2019 14:31

я имею в виду, что хочу переключить ближайший div из диапазона, а не два div, когда я использую $(".list-type-demandes").toggle();

— 28.05.2019 14:33

но если я нажму на диапазон 1 и диапазон 2, конечно, я хотел бы отобразить два div

— 28.05.2019 14:33

ваш селектор означает, что вы ищете класс div, а не div - удалите точку

— 28.05.2019 14:39

javascript jquery html

28.05.2019 14:28

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

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

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

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

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

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

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

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

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

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

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

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

371

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

Ответы 2

Используйте ID уникальный и проверьте код ниже,

Вы также можете использовать прямой щелчок

$('.toogle-toobar-open').click(function(){
  $(this).closest("label").next(".list-type-demandes").toggle();
});

label{
  display:block;
}

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script>
function toogleListTypeDemande(element) {
    $(element).closest("label").next(".list-type-demandes").toggle();
}
</script>
<label style = "color: #1c5081">
        <span id = "toolbar-open" name = "toolbar_open" class = "toogle-toobar-open" onclick = "toogleListTypeDemande(this)"><b>+</b>Organisation, support et services
        </span> 
      </label>

      <div class = "list-type-demandes" style = "padding-left: ; display: none">
         <label style = "display: inline">
         <input type = "radio" class = "checkbox_type_demande" data-appel-projet = "474" name = "appel_projet[type_demande_list]" value = "54" id = "appel_projet_type_demande_list_54"> Architecture d'entreprise
        </label>
      </div>

      <label style = "color: #1c5081">
        <span id = "toolbar-open2" name = "toolbar_open" class = "toogle-toobar-open" onclick = "toogleListTypeDemande(this)"><b>+</b> Applications</span> 
      </label>


      <div class = "list-type-demandes" style = "padding-left: ; display: none">
        <label style = "display: inline">
        <input type = "radio" class = "checkbox_type_demande" data-appel-projet = "474" name = "appel_projet[type_demande_list]" value = "52" id = "appel_projet_type_demande_list_52"> Système d'information activités recherche
        </label>
      </div>

28.05.2019 14:40

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

Вам нужно немного изменить toogleListTypeDemande(element).

Javascript предлагает атрибут nextElementSibling для получения следующего HTML-элемента. К сожалению, нет следующего брата для вашего элемента span. Итак, нам нужно вернуться на один узел назад, чтобы получить его родительский элемент element.parentNode, который является меткой, а оттуда следующим родственным элементом будет div.

function toogleListTypeDemande(element) {
        $(element.parentNode.nextElementSibling).toggle();
    }

28.05.2019 14:43

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

Массив сообщений Ajax, когда он заполнен

JQuery ajax не поддерживает порядок массива

Как рассчитать налог с зарплаты

Изменение источника трансформации с помощью jQuery?

Анимация загрузки Highchart не работает при задании «verticalAlign» для «setTitle»

Как сделать 2 или более таблиц из одних данных JSON

Ключ FormData не проходит

Окно оповещения должно быть закрыто несколько раз

Выбор и изменение атрибута класса с помощью jQuery?

Datepicker beforeshowday не работает

Jquery Span нажмите, чтобы найти следующий div

Ответы 2

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

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