JQuery單擊slidetoggle僅適用於PHP重復DIVS的第一個DIV

Question

我有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而不是以下任何一個DIV都很有用。 我是否需要將腳本放在其他地方？ 我真的迷失了。

任何幫助表示贊賞-Tom

Answer 1

ID應該是唯一的。 切勿在文檔中多次使用相同的ID。 將您的代碼更改為：

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>

這樣，您的ID就是唯一的，每個面板都通過包含面板ID的自定義屬性（ data-panel ）與其“翻轉”div相關聯。

Answer 2

您正在為多個div分配相同的ID。 根據定義，ID是唯一的。 如果您在多個元素上設置相同的ID，則您的HTML將無效並且所有投注均已關閉。 jQuery將使用GetElementByID（）來選擇在向其傳遞ID時要抓取的元素，並且當多個具有相同ID的元素未定義時，GetElementByID的行為。 它理論上可以做任何事情（拋出異常，返回第一個匹配元素，選擇最后一個匹配元素，隨機選擇一個匹配元素，讓惡魔飛出你的鼻子等）。

由於您希望代碼影響多個元素，因此所有這些元素都有一些共同點。 因此它們都屬於同一類元素，您應該使用class =“someclass”來指示哪些元素屬於該類。 HTML喜歡：

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

JS喜歡：

$(".flip").click(function(){       // Line B

Answer 3

作為一個至少對我來說有用的建議，當我使用類來實現綁定函數時，我喜歡將該類與其他類相區別，所以我將前綴“js-”添加到類中。 這樣我就知道它不是一個設計類，一個事件綁定到該類，並且該類不應該被刪除。 所以我會用“js-flip”代替“翻轉”。 但它只是和建議作為良好實踐，有些人不能同意我，但它在多個人觸及相同代碼的項目中非常有用。 此外，我不會為該類添加css樣式，因為它的海豚只是程序化的，所以它對設計師來說是透明的。

JQuery單擊slidetoggle僅適用於PHP重復DIVS的第一個DIV

問題描述

3 個解決方案

解決方案1
1 已采納 2014-03-20 13:04:01

解決方案2
1 2014-03-20 13:05:38

解決方案3
0 2014-03-20 14:21:05

JQuery單擊slidetoggle僅適用於PHP重復DIVS的第一個DIV

問題描述

3 個解決方案

解決方案1 1 已采納 2014-03-20 13:04:01

解決方案2 1 2014-03-20 13:05:38

解決方案3 0 2014-03-20 14:21:05

解決方案1
1 已采納 2014-03-20 13:04:01

解決方案2
1 2014-03-20 13:05:38

解決方案3
0 2014-03-20 14:21:05