JQuery click slidetoggle работает только для первого DIV PHP повторного DIVS

0

У меня есть DIV, которые повторяются для записей в базе данных через PHP, и у меня есть jquery-скрипт, который по щелчку должен расширять div-ребро.

Это простой код для слайда, общий материал:

<script src =
  "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script> 
  $(document).ready(function(){        // Line A   
    $("#flip").click(function(){       // Line B
      $("#panel").slideToggle("slow"); // Line C
    });
  });
</script>


<body>

  <div style="background:red" id="flip">Click to slide the panel down or up</div>

  <div style="background:green" id="panel">Oh Hello There</div>


#panel {
    display:none;
    }

Сценарий: http://jsfiddle.net/hpvgp/3/

Однако, когда я пытаюсь применить это к моему коду, где у меня отключены div, он работает только для первого div.

Текущий код:

<?php
$webserver = 'localhost'; 
$administrator = 'root';
$password = '';
$db_name = 'cdb';
$db = mysqli_connect($webserver, $administrator, $password, $db_name)
  or die('Error connecting');

if( isset($_REQUEST['page'])) {
  $_SESSION['page'] = $_REQUEST['page'];
}else{
  $_SESSION['page'] = 1;
}
$records_per_page = 8;
$query = "SELECT * FROM cars";
$result = mysqli_query($db, $query)
  or die("Error in query: '$query'");
$row = mysqli_fetch_assoc($result);
$i = 0;
$start = ($_SESSION['page'] - 1) * $records_per_page;
$end = ($_SESSION['page']) * $records_per_page;
while($row = mysqli_fetch_assoc($result) and $i < $end) {
  $i++;
  if( $i > $start ) 
  {;
    echo'
    <div><br><br>

      <div id="flip" class="navbar navbar-inverse" style ="margin-top:-40px; height:128px"> 

          <div style="float:left; height:100px; width:200px">
            <img src="'.$row['logo'].'" style="margin:10px; float:left" height="100"/></div> 
            <div style="float:left"><h2>'.$row['make'].' '.$row['model'].'</h2></div>
      </div>

    </div>

    <div><img id="panel" style="padding-bottom: 100px" src="images/cars/'.$row['carIndex'].'.jpg" height="300"/><div> ';
  }
}

В настоящее время я использую Bootstrap, не уверен, что это имеет значение.

Мне кажется странным, что это будет работать для первого DIV, но не из следующих. Возможно, мне нужно разместить сценарий где-то еще? Я действительно потерял это.

Любая помощь оценивалась -Tom

  • 1
    Идентификаторы уникальны, поэтому jQuery ожидает только один элемент с таким идентификатором, поэтому он работает только с первым. Используйте классы вместо.
  • 3
    Используйте класс вместо идентификатора на div
Показать ещё 1 комментарий
Теги:

3 ответа

1
Лучший ответ

Ожидается, что идентификаторы будут уникальными. Никогда не используйте один и тот же идентификатор более одного раза в документе. Измените свой код на:

while($row = mysqli_fetch_assoc($result) and $i < $end) {
    $i++;
    if( $i > $start ) 
    {
        echo'
          <div><br><br>

               <div class="flip navbar navbar-inverse" data-panel="panel_' + $i . '" style ="margin-top:-40px; height:128px"> 

                <div style="float:left; height:100px; width:200px">
                    <img src="'.$row['logo'].'" style="margin:10px; float:left" height="100"/></div> 
                <div style="float:left"><h2>'.$row['make'].' '.$row['model'].'</h2></div>
               </div>
         </div>

         <div><img id="panel_' . $i . '" style="padding-bottom: 100px" src="images/cars/'.$row['carIndex'].'.jpg" height="300"/><div> ';
    }
}

И теперь измените свой javascript на:

<script> 
  $(document).ready(function(){          
    $(".flip").click(function(){  
      var panelId = $(this).attr('data-panel');   
      $('#' + panelId).slideToggle("slow")
    });
  });
</script>

Таким образом, ваши идентификаторы уникальны, и каждая панель связана с его "флип" с помощью настраиваемого атрибута (data-panel), который содержит идентификатор панели.

Поделиться
  • 0
    Я только что применил это решение, но у вас все получилось, я поместил скрипт в echo с номером цикла, добавленным к имени класса js.
1

Вы назначаете один и тот же идентификатор нескольким div. Идентификатор, по определению, уникален. Если вы установите один и тот же идентификатор более чем на один элемент, ваш HTML-код будет недействительным и все ставки будут отключены. jQuery будет использовать GetElementByID(), чтобы выбрать, какой элемент захватить, когда вы передаете ему идентификатор, и поведение GetElementByID, когда не более одного элемента с тем же идентификатором не определено. Теоретически можно было что-либо сделать (выкинуть исключение, вернуть первый соответствующий элемент, выбрать последний элемент соответствия, выбрать случайный случайный элемент, заставить демонов вылететь из носа и т.д.).

Поскольку вы хотите, чтобы ваш код затрагивал более одного элемента, все эти элементы имеют что-то общее. Поэтому все они принадлежат к одному и тому же классу элементов, и вы должны использовать class= "someclass", чтобы указать, какие элементы принадлежат этому классу. HTML как:

<div class="flip navbar navbar-inverse" style ="margin-top:-40px; height:128px">

JS нравится:

$(".flip").click(function(){       // Line B
Поделиться
0

Как совет, который работает, по крайней мере, для меня, когда я использую классы для функций привязки, мне нравится разделить этот класс на другие, поэтому я добавляю в класс префикс "js-". Таким образом, я буду знать, что это не класс дизайна, что событие связано с этим классом, и этот класс не следует удалять. Поэтому я буду использовать "js- flip" вместо "flip". Но это просто и советы, как хорошие практики, и некоторые люди не могут согласиться со мной, но это было очень полезно в проектах, в которых более одного человека касались одного и того же кода. Также я не буду добавлять стили CSS в этот класс, потому что морская свинка это только программная, поэтому она будет прозрачной для дизайнеров.

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню