jquery для скрытия заголовка / заголовка аккордеона

#javascript #html #jquery #show-hide

#javascript #HTML #jquery #показать-скрыть

Вопрос:

У меня есть шаблон, который я создаю для коллег, чтобы использовать его в редакторе WYSIWYG (я учитель) с аккордеоном, чтобы они могли легко добавлять контент к каждому из них. У него будут лишние заголовки / содержимое для коллег, которые можно использовать, но это не показывает ничего, что имеет что-то вроде «title_name» в качестве текста заголовка. HTML — это:

         <div class="accordion">
           <div class="card">
              <div class="card-header" data-toggle="collapse">
                 <h2 class="card-title">
                    Accordion 1
                 </h2>
              </div>
              <div class="collapse">
                 <div class="card-body">
                    <p>Insert Accordion 1 of 4 content here.</p>
                 </div>
              </div>
           </div>
           <div class="card">
              <div class="card-header">
                 <h2 class="card-title">
                    Accordion 2
                 </h2>
              </div>
              <div class="collapse">
                 <div class="card-body">
                    <p>Insert Accordion 2 of 4 content here.</p>
                 </div>
              </div>
           </div>
           <div class="card">
              <div class="card-header">
                 <h2 class="card-title">
                    Accordion 3
                </h2>
              </div>
              <div class="collapse">
                 <div class="card-body">
                    <p>Insert Accordion 3 of 4 content here.</p>
                 </div>
              </div>
           </div>
           <div class="card">
              <div class="card-header">
                <h2 class="card-title">
                    title_name
                 </h2>
              </div>
              <div class="collapse">
                 <div class="card-body">
                    <p>Insert Accordion 4 of 4 content here.</p>
                 </div>
              </div>
           </div>
       </div>
  

Jquery, который у меня есть, это

 $(".card-header").each(function(){ ($(this).text() === "title_name") ? $(this).hide() : $(this).show()});
  

Помощь будет принята с благодарностью 🙂

Ответ №1:

Вы можете использовать :содержит jquery. Поскольку у вас есть тег h2 внутри div класса card-header, jquery не может получить текст title_name . Я проверил, что этот код должен работать.

   $("div.card-header:contains(title_name)").hide();
  

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

1. Ты гений! Вы сделали мой день!