PHP语句中的CSS
CSS within PHP statement
我正试图通过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
});
});
相关文章:
- 多个if语句根据URL返回css值
- PHP语句中的CSS
- Vanilla JavaScript:有没有办法在一个语句中切换多个CSS类
- 如何在jquery中使用fadeTo等动画标记以及css更改语句
- 我可以在jquery或javascript中对rel语句使用“显示无”,或者只是使用css吗?
- JS/jQuery 使用 if/else 语句更改 CSS
- 使用 javascript if/else 语句更改 CSS 值
- HTML if 语句,用于在 CDN 失败时加载本地 JS/CSS
- 指定 CSS 属性的条件语句
- 将 JQuery .css放入条件语句中
- 如何在 css 和 javascript 中隐藏 “body” 语句
- 不是 CSS 中的语句?还是绕道而行?(超级鱼)
- 我需要添加一个条件语句来将css高度链接到下拉选择(jQuery)
- jQuery CSS语句中没有计算的变量
- 带有css条件的javascript if语句
- 我应该使用switch语句将CSS id与JavaScript变量关联起来吗?
- 在JavaScript中,通过条件语句更改css的正确语法是什么?
- 如何在if语句中使用css类滚动页面
- 在LESS CSS中使用JavaScript/Switch语句
- jQuery if/else 语句以在单击时更改 css