gpt4 book ai didi

javascript - php 和 html javascript 错误

转载 作者:行者123 更新时间:2023-12-03 12:25:50 25 4
gpt4 key购买 nike

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

这是我的文件。此页面上的 javascript 使用 jquery 使所有跨度达到 ol 中最宽跨度的宽度,但当我尝试添加 <li></li> 时,它失败了元素,谁能告诉我为什么下面指出的 li 会导致脚本无法获取最宽跨度的实际宽度。

<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>

最佳答案

那是因为下面一行

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

尝试获取<span>标签来自<li>在你的情况下,你没有 <span>最后的标签 <li> ,所以尝试改变:

..<li></li>
..

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

关于javascript - php 和 html javascript 错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24216097/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com