使用 JavaScript 和 PHP 的每个类的列高

Posted 2023-02-23

【中文标题】使用 JavaScript 和 PHP 的每个类的列高

【英文标题】：Column height per class with JavaScript and PHP

【发布时间】：2011-07-20 19:58:57

【问题描述】：

我的脚本中有以下代码来设置每列的最大高度。 但是，我打算为每行的所有 4 列单独设置最大高度。 目前它不会执行每个类的函数。

这是 javascript：

<script type="text/javascript" >
$(document).ready(function() 

<?php
$test = $cart->count_contents();
for ($i=0, $n=$test; $i<$n; $i++) 
?>
setHeight('.<?php echo 'col'.$i; ?>');
<?php
  
?>

);


 //Initialize the global variable, this will store the highest height value
var maxHeight = 0;


function setHeight(col) 



//Get all the element with class = col
col = $(col);

//Loop all the col
col.each(function() 

//Store the highest value
if($(this).height() > maxHeight) 
maxHeight = $(this).height();;

);

//Set the height
col.height(maxHeight);

</script>

我使用 PHP 从 mysql 数据库中提取每一行并生成以下 html：

<div class="ui-grid-c ui-bar ui-bar-e">
<div class="ui-block-a"><div class="ui-bar ui-bar-b" style="height: 20px;">Remove</div></div>

<div class="ui-block-b"><div class="ui-bar ui-bar-b" style="height: 20px;">Product(s)</div></div>
<div class="ui-block-c"><div class="ui-bar ui-bar-b" style="height: 20px;">Qty.</div></div>
<div class="ui-block-d"><div class="ui-bar ui-bar-b" style="height: 20px;">Total</div></div>

<div class="ui-block-a"><div class="ui-bar ui-bar-c col0"><input type="checkbox" name="somename1" value="somevalue1"></div></div>



<div class="ui-block-b"><div class="ui-bar ui-bar-c col0"><a href="#"><img src="images/someimage1.gif" border="0"  title="sometitle1"  ></a>
<a href="#"><b>sometitle1</b></a><br><small><i - >somecontent</i></small><br><small><i> - somecontent</i></small><br><small><i> - somecontent</i></small></div></div>

<div class="ui-block-c"><div class="ui-bar ui-bar-c col0"><input type="text" name="somename1" value="1" size="4"></div></div>
<div class="ui-block-d"><div class="ui-bar ui-bar-c col0"><b>sometext1</b></div></div>


<div class="ui-block-a"><div class="ui-bar ui-bar-c col1"><input type="checkbox" name="somename2" value="somevalue2"></div></div>



<div class="ui-block-b"><div class="ui-bar ui-bar-c col1"><a href="#"><img src="images/someimage2.gif" border="0"  title="sometitle2"  ></a><a href="#"><b>sometitle2</b></a></div></div>
<div class="ui-block-c"><div class="ui-bar ui-bar-c col1"><input type="text" name="somename2" value="1" size="4"></div></div>
<div class="ui-block-d"><div class="ui-bar ui-bar-c col1"><b>sometext1</b></div></div>


</div><!-- /grid-a -->

【问题讨论】：

我解决了这个问题： var maxHeight = 0;在函数内部而不是在函数之上

【参考方案1】：

问题不适合自己回答，我会复制你的解决方案

你只需要改变：

 //Initialize the global variable, this will store the highest height value
var maxHeight = 0;


function setHeight(col) 
// etc etc etc

到：

function setHeight(col) 
 var maxHeight = 0;
 //etc etc etc

【参考方案2】：

我只需要改变：

 //Initialize the global variable, this will store the highest height value
var maxHeight = 0;


function setHeight(col) 
// etc etc etc

到：

function setHeight(col) 
 var maxHeight = 0;
 //etc etc etc