CSS в инструкции PHP

Question

Я пытаюсь создать несколько div, которые реагируют на событие click через js. Если я использую универсальный id/class вместо переменной, он работает, но при нажатии каждого div на одно и то же имя отвечает. Вот код, спасибо заблаговременно!

<?php 
$con=mysqli_connect("host","user","password","database"); 
// Check connection 
if (mysqli_connect_errno()) { 
    echo "Failed to connect to MySQL: " . mysqli_connect_error(); 
} 

$sql = "SELECT * FROM items"; 
$result = mysqli_query($con,$sql); 


echo ""; 
while ($row = mysqli_fetch_array($result)) { 
    echo " 

    <style> 


#" . $row['ID'] ." { 
    margin-left: 100px; 
    margin-top: 0px; 
    height:0px; 
    width:750px; 
    background: rgba(255, 255, 255, 0.3); 
    color: rgba(11, 11, 11, 0.8); 
    cursor:pointer; 
    transition: height 0.5s; 
    border-radius: 10px; 
    overflow: hidden; 
    box-shadow: 0px 2px 1px white inset, 0px -2px 8px white, 0px 2px 5px rgba(0, 0, 0, 0.1), 0px 8px 10px rgba(0, 0, 0, 0.1); 
    -webkit-transition:box-shadow 1.0s; 
    } 
#" . $row['ID'] .".csseffect { 
    margin-left: 100px; 
    margin-top: 5px; 
    width: 750px; 
    height: 125px; 
    }  
#" . $row['item'] ." { 
    margin-left: 75px; 
    height: 50px; 
    width: 800px; 
    outline: none; 
    font-family : inherit; 
    font-size : 100%; 
    background: rgba(255, 255, 255, 1.0); 
    -webkit-box-sizing: border-box; /* For legacy WebKit based browsers */ 
    -moz-box-sizing: border-box; /* For legacy (Firefox <29) Gecko based browsers */ 
    box-sizing: border-box; 
    border-radius: 20px; 
    padding: 5px; 
    border: solid 1px #dcdcdc; 
    box-shadow: 0px 2px 1px white inset, 0px -2px 8px white, 0px 2px 5px rgba(0, 0, 0, 0.1), 0px 8px 10px rgba(0, 0, 0, 0.1); 
    -webkit-transition:box-shadow 0.5s; 

    } 

    </style> 



    <div id=\"".$row['ID']."\" class=\"".$row['ID']."\">" . $row['item'] ."<br></div> 
    <div id=\"".$row['item']."\" class=\"".$row['item']."\"><br> 
    <div class=\"forms\"> 
Blah blah blah 
</div> 
<p class=\"pos_fixed\">Some positioned text.</p> 
</div><br> 

<script> 
$(document).ready(function(){ // when the page has loaded in browser... 
    $('.".$row['ID']."').click(function(){  // bind a click event to the div element... 
    $('.".$row['item']."').toggleClass('csseffect'); // that toggles the 'csseffect' class 
    }); 
}); 


</script> 


"; 
} 
?> 

Answer 1

Что о вводе каждой группы элемента в DIV и огнь срабатывает, когда вместо этого нажимается только содержащийся div.

<div class="div_class">  
    <div id=\"".$row['ID']."\" class="id_class">" . $row['item'] ."<br></div> 
    <div id=\"".$row['item']."\" class="item_class"><br> 
     <div class=\"forms\"> 
      Blah blah blah 
     </div> 
    </div> 
</div> 

<script> 
    $(document).ready(function(){ // when the page has loaded in browser... 
     $('.div_class').click(function(){ 
     $(this > .item_class).toggleClass('csseffect'); 
      //toggle class 
     }); 
    }); 
</script> 

Answer 2

Вы должны использовать $(this).next('.".$row['item']."') целевые следующий item, который приходит после щелкнутого элемента в DOM ...

$(document).ready(function(){ // when the page has loaded in browser... 
    $('.".$row['ID']."').click(function(){  // bind a click event to the div element... 
    $(this).next('.".$row['item']."').toggleClass('csseffect'); // that toggles the 'csseffect' class 
    }); 
});