[英]Jquery Database conflict
当我添加更多行时,左侧的batsman列也会根据行调整其高度。 为此,我使用了一个小脚本。 当页面是静态的时,它可以很好地工作。
从数据库中检索行时,有时会加载jquery,并根据行数设置batsman列的高度,但是有时会失败,并且不会根据行数来设置batsman列的高度。
注意:页面每30秒刷新一次。 如果该实例未加载该jQuery,它将在下一个数据库ping上加载。
这是小提琴。 https://jsfiddle.net/my1mt971/1/
<div class="bat_slot1">
<div class="batsman1">
<div class="batty1">
<div id="myBlueDiv1">
<p>Batsman</p>
</div>
</div>
</div>
<div class="row2">
<ul>
<li style="width: 32px;"><img src="images/new_wicketl.png" width="15"
height="15" /></li>
<li style="width: 202px;">Row 1</li>
<li style="width: 54px;"><img src="images/gold_player.png" width="22"
height="20" /></li>
<li style="width: 127px;">CSK</li>
<li style="width: 35px; color: #00f033">25</li>
</ul>
</div>
<div class="row2">
<ul>
<li style="width: 32px;"><img src="images/new_wicketl.png" width="15"
height="15" /></li>
<li style="width: 202px;">Row 2</li>
<li style="width: 54px;"><img src="images/gold_player.png" width="22"
height="20" /></li>
<li style="width: 127px;">CSK</li>
<li style="width: 35px; color: #00f033">25</li>
</ul>
</div>
<div class="row2">
<ul>
<li style="width: 32px;"><img src="images/new_wicketl.png" width="15"
height="15" /></li>
<li style="width: 202px;">Row 3</li>
<li style="width: 54px;"><img src="images/gold_player.png" width="22"
height="20" /></li>
<li style="width: 127px;">CSK</li>
<li style="width: 35px; color: #00f033">25</li>
</ul>
</div>
<div class="row2">
<ul>
<li style="width: 32px;"><img src="images/new_wicketl.png" width="15"
height="15" /></li>
<li style="width: 202px;">Row 4</li>
<li style="width: 54px;"><img src="images/gold_player.png" width="22"
height="20" /></li>
<li style="width: 127px;">CSK</li>
<li style="width: 35px; color: #00f033">25</li>
</ul>
</div>
<script>var divHeight = $('.bat_slot1').height();
$('.batty1').css('min-height', divHeight+'px');</script>
</div>
的CSS
@charset "utf-8";
/* CSS Document */
.my_team_players { width: 593px; height: 487px; padding-top: 0px; /* background: #F9ACAC; */ /* padding: 5px; */ border-bottom: 4px solid #fff; border-left: 4px solid #fff; border-right: 4px solid #fff; border-top: 4px solid #fff;}
.other_team_players { width: 593px; height: 487px; padding-top: 0px; /* background: #F9ACAC; */ /* padding: 5px; */ border-bottom: 4px solid #fff; border-left: 4px solid #fff; border-right: 4px solid #fff; border-top: 4px solid #fff; margin-top: 262px;}
.batsman1 { width:118px; height:auto; float:left; }
.batty1 {width: 114px;
height: 66px;
background-color: #e34309;display: -webkit-flex; /* Safari */
-webkit-align-items: flex-start; /* Safari 7.0+ */
}
#myBlueDiv1 {
-webkit-align-self: center; /* Safari 7.0+ */
align-self: center;
color: #fff; font-size:13px; font-weight:bold;
}
#myBlueDiv1 p {
color: #fff; font-size:13px; font-weight:bold;}
.batty1 p {padding: 23px;
font-family: "Open Sans";
font-size: 14px; text-align:center; }
.row2 { width: 592px; height:32px; background: #2f5385;margin-top: 2px;}
.row2 ul { list-style-type:none;margin: 0px; padding: 9px;}
.row2 ul li { font-family:"Open Sans"; font-size:12px; color:#fff; float:left; font-weight: bold;}
.bat_slot1 { width:600px; height:auto;}
请帮助。 谢谢。
尝试在$ .ready()中编写您的jquery代码,以便首先加载所有dom元素,然后将元素高度设置为:
$(function(){
var divHeight = $('.bat_slot1').height();
$('.batty1').css('min-height', divHeight+'px');
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.