2014-06-14 42 views
0

我在使用php生成html時無法運行某些javascript時遇到問題。錯誤使用php和html javascript錯誤

這是我的文件。在這個頁面上的JavaScript使所有跨度的使用jQuery的最大跨度的寬度,但它失敗時,我嘗試添加<li></li>元素,誰能告訴我爲什麼李指出下面導致腳本無法獲得actaul最寬的寬度。

<html> 
<head> 
<style> 
.codesnippet { 
    font-family: Verdana, Arial, Helvetica, sans-serif; 
    border: thin solid black; 
    width: 740px; 

} 
.codesnippet .heading { 
    padding-left: 10px; 
    background-color: lightblue; 
    height: 25px; 
} 
.codesnippet .content { 
    background-color: white; 
    white-space: nowrap; 
    overflow: scroll; 

} 
.codesnippet .grey { 
    background-color: lightgrey; 
    margin: 0px; 
    display: inline-block; 
    min-width: 683px; 
} 
.codesnippet .white { 
    background-color: white; 
    margin: 0px; 
    display: inline-block; 
    min-width: 683px; 
} 
</style> 
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script> 
<script> 
window.onload = function() { 
    var spanwidth = [] 
    l = 0; 
    var ollength = $('ol').length; 
    for (var i = 0; i < ollength; i++) { 
     $('ol').eq(i).children('li').each(function() { 
      spanwidth.push($(this).children('span').width()); 
      l++; 
     }); 
     makeThemEqual(i, spanwidth); 
     l = 0; 
    } 
} 
function makeThemEqual(i, spanwidth) { 
    var a = 0; 
    var widest = spanwidth[0]; 
    $('ol').eq(i).children('li').each(function() { 
     if (widest < spanwidth[a]) { 

      widest = spanwidth[a]; 
     } 
     a++; 
    }); 
    if (widest > 683) { 
     $('ol').eq(i).children('li').each(function() { 

      $(this).children('span').width(widest + "px"); 
     }); 
    } 
    widest = 0; 

} 
</script> 
</head> 
<body> 
<div class="codesnippet"> 
<div class="content"> 
<?php echo 
"<ol>". 
"<li><span class='grey'>".htmlspecialchars("<?php")."</span></li>". 
"<li><span class='white'>".htmlspecialchars("/*")."</span></li>". 
"<li><span class='grey'>".htmlspecialchars("Plugin Name: PlacePluginNameHere")."</span></li>". 
"<li><span class='white'>".htmlspecialchars("Plugin URI: PlaceWebsiteAddressHere")."</span></li>". 
"<li></li>". //<--------------------- THIS CAUSES IT TO FAIL if this li is removed the script runs fine. 
"</ol>"; 
?> 
</div> 
</div> 
<div class="codesnippet"> 
<div class="content"> 
<?php echo 
"<ol>". 
"<li><span class='grey'>".htmlspecialchars("<?php ?>")."</span></li>". 
"<li><span class='white'>".htmlspecialchars("<div class=\"wrap\">")."</span></li>". 
"<li><span class='grey'>&nbsp;&nbsp;&nbsp;&nbsp;".htmlspecialchars("<div>")."</span></li>". 
"<li><span class='white'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;".htmlspecialchars("<form method=\"post\" action=\"options.php\">")."</span></li>". 
"<li><span class='grey'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;".htmlspecialchars("<?php settings_fields('Template_Settings'); ?>")."</span></li>". 
"<li><span class='white'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;".htmlspecialchars("<?php ")."$".htmlspecialchars("options = get_option('Template_Settings'); ?>")."</span></li>". 
"<li><span class='grey'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;".htmlspecialchars("<label>Example Setting</label> <input type=\"text\" name=\"Template_Settings[ExampleSetting]\" value=\"<?php echo ")."$".htmlspecialchars("options['ExampleSetting']; ?>\"><br>")."</span></li>". 
"<li><span class='white'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;".htmlspecialchars("<label></label><input type=\"submit\" name=\"Submit\" value=\"<?php esc_attr_e('Save Changes'); ?>\">")."</span></li>". 
"<li><span class='grey'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;".htmlspecialchars("</form>")."</span></li>". 
"<li><span class='white'>&nbsp;&nbsp;&nbsp;&nbsp;".htmlspecialchars("</div>")."</span></li>". 
"<li><span class='grey'>".htmlspecialchars("</div>")."</span></li>". 
"</ol>"; 
?> 
</div> 
</div> 
</body> 
</html> 

回答

1

那是因爲下面一行

... 
$(this).children('span').width(widest + "px"); 
.. 

特里從<li>和你的情況得到<span>標籤你不必爲去年<li><span>標籤,所以嘗試改變:

..<li></li> 
.. 

.. 
<li><span></span></li> 
.. 
+0

跨度在那裏仍然失敗 – mainuse4r