PHP语句中的CSS - CSS within PHP statement

CSS within PHP statement

本文关键字：CSS 语句 PHP | 更新日期: 2023-09-27

我正试图通过js创建许多响应点击事件的div。如果我使用一个通用的id/类而不是一个变量，它会起作用，但单击相同名称的每个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>

";
}
?>

将每个项目组放在一个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>

您需要使用$(this).next('.".$row['item']."')来定位DOM中单击元素之后的下一个item。。。

$(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
  });
});