Question

我在使用php生成html时无法运行某些javascript时遇到问题。

这是我的档案。这个页面上的javascript使用jquery使得所有跨越ol中最宽跨度的宽度但是当我尝试添加<li></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>

Answer 1

多数民众赞成因为行

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

从<span>获取<li>代码，在您的情况下，您上次<span>没有<li>代码，请尝试更改：

..<li></li>
..

到

..
<li><span></span></li>
..

php和html javascript错误导致错误

1 个答案: