Я только начинаю разбираться в PHP и Javascript, так что простите меня, если я делаю что-то глупое со своим методом ...

У меня есть сценарий PHP, который получает значения из базы данных MySQL после нажатия кнопки отправки. Данные помещаются в шаблон и работают очень хорошо. Если есть несколько записей, они показаны ниже, в них есть собственные индивидуальные шаблоны ».

Однако внизу шаблона есть скрытый раздел, который открывается при нажатии кнопки. Скрытие / отображение работает, если отображается один результат, однако если несколько результатов из загрузки базы данных и нажата кнопка на первом параметре, то откроются и все остальные параметры скрыть / показать! Не только на один шаблон, который был нажат.

Я придумал решение, в котором я добавляю строку id в контейнеры шаблона id. т.е.

<div class="template-container" id="<?php echo $row['id'];?>"> .

Затем я использую этот JS, чтобы скрыть и показать раскрывающуюся часть шаблона:

$(document).ready(function(){  

            $(".reveal-container").hide();
            $("#reveal-arrow").click(function(){
            $(".reveal-container").slideToggle();
            $("#reveal-arrow").toggleClass('flip');
    });
});
    </script>

Я пытался добавить что-то вроде:

$("#<?php echo $row['id'];?> .reveal-container").hide();

Ссылаясь на id, я подумал, что это может сработать .... Но это не так!

Как лучше всего иметь каждое отдельное скрытие / отображение при нажатии кнопки в соответствующем шаблоне.

Я осмотрелся и обнаружил, что использование $ (this) может помочь ... однако я не могу понять, как это сделать!

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

Обновление - вот HTML:

<div class="template-container" id="<?php echo $row['id'];?>">

<div class="row">
  <div class="column" >
    <img id="est_img" src="assets/Restaurants.png">
    <div id="address_subtitle"><?php echo $row['locale'];?>, London</div>
  </div>
  <div class="column">

    <div id="est_title"><?php echo $row['name'];?> <b>9/2</b></div>
    <div id="know_subtitle">Know For: <b>NONE</b></div>
      <div id="price_subtitle"> <?php echo $row['price_range'];?> </div>
      <div id="tags_subtitle">PLACEHOLDER</div>
      <img id="reveal-arrow" src="assets/Arrow-Down-icon.png">
  </div>

</div>
    <div class="solid-line"></div>
    <div class="reveal-container">

        <div class="button-row">

            <button id="visited_button">Visited</button><button     id="add_list_button">Add To List</button>

        </div>

        <div class="info-row">

            <div id="full_address_subtitle">PLACEHOLDER</div>
            <div class="grey-line"></div>
            <div id="telephone_subtitle"><a href="tel:<?php echo $row['phone_number'];?>"><?php echo $row['phone_number'];?></a></div> 
            <div id="website_subtitle"><a href="<?php echo $row['website'];?>" target="_blank" >Visit Website</a></div>

        <div class="comments-row">

        </div>




    </div>

</div></div>


    <?php }}} ?>

    <script>
$(document).ready(function(){  

            $(".reveal-container").hide();
            $("#reveal-arrow").click(function(){
            $(".reveal-container").slideToggle();
            $("#reveal-arrow").toggleClass('flip');
    });
});
    </script>


    <form method="post">
    Club: <input type='checkbox' name="selectClub" value="1" />
    Restaurant: <input type='checkbox' name="selectRestaurant" value="1" />
    Bar: <input type='checkbox' name="selectBar" value="1"/>
    Pub: <input type='checkbox' name="selectPub" value="1"/>
    <button type="submit" name="submit" value="1">Submit</button>
</form>
-1
tbowden 20 Сен 2018 в 17:01

2 ответа

Лучший ответ

Я не уверен, как выглядит ваш окончательный HTML-код, но похоже, что ваши элементы повторяются внутри каждого <div class="template-container" id="<?php echo $row['id'];?>">, что приводит к нескольким неуникальным идентификаторам.

Прежде всего, значение идентификатора должно быть уникальным в HTML-документе https: //www.w3schools. COM / теги / att_global_id.asp. Я бы посоветовал использовать ваш PHP, чтобы сделать идентификаторы элементов уникальными для каждой строки. Даже простого "-" + индекса цикла должно быть достаточно. Или не используйте идентификаторы там, где они вам не нужны, а вместо этого используйте классы.

Во-вторых, $ ("# show-arrow") - это селектор идентификаторов jQuery, и, как я уже сказал, вы создаете строки, заполненные элементами с неуникальными идентификаторами. Это означает, что ваше событие клика прикрепляется только к первому. Вы можете сделать стрелку-указатель классом вместо идентификатора.

$(".reveal-arrow").click(function () {
            $(".reveal-container").slideToggle();
            $(this).toggleClass('flip');
        });

Но тогда вам все равно нужно настроить скрипт для таргетинга на ЭТО раскрытый контейнер.

$(".reveal-arrow").click(function(){
              $(this).parents('.template-container').find('.reveal-container').slideToggle();
              $(this).toggleClass('flip');
 });

Еще одна вещь, вам не нужно иметь $(".reveal-container").hide();. Вы можете просто установить контейнер для раскрытия на style="display:none;" с помощью CSS при загрузке страницы, потому что slideToggle покажет его, если он скрыт. http://api.jquery.com/slidetoggle/ Такой способ немного эффективнее.

1
jwebb 20 Сен 2018 в 15:04

Используйте селектор this, чтобы выбрать только необходимый элемент. поскольку ваша стрелка раскрытия где-то «спрятана» в вашем контейнере, вам нужно добавить обход дерева к вашей js-функции:

$("#reveal-arrow").click(function(){
    var clickedContainer = $(this).parents(".template-container"); //go up to your parent container
    clickedContainer.find(".reveal-container").slideToggle(); //find the reveal-container child and slide toggle it
    $(this).toggleClass('flip'); // don't forget to flip your arrow
});
1
errand 20 Сен 2018 в 14:49