<header>
<script type="text/javascript">
function hideit()
{
var x1 = document.getElementsByTagName("ol").item(0);
var x = document.getElementsByTagName("ol");
for (var i = 0; i < x.length; i++)
x[i].style.display="none";
}
function showit()
{
var x1 = document.getElementsByTagName("ol").item(0);
var x=document.getElementsByTagName("ol");
for (var i = 0; i < x.length; i++)
x[i].style.display="";
}
</script><header>
<body>
foreach $key (keys %{$stats_data{$out}}) {
print $indexfd ("<input onclick=\"showit()\" type=\"button\" id=\"<?perl echo $key; ?>\" value=\"showit\"><br><input onclick=\"hideit()\" type=\"button\" id=\"<?perl echo $key; ?>\" value=\"hideit\"><br><b><ol id=$key>$stats_data{$out}{$key}<ol id=$key> </b><br>");
}</body>
我正在用perl创建一个html文档。我为每个perl变量编写了一个事件mouseover和mouseout（通过循环）。但是看起来该事件同时控制所有变量。我如何只编写一次事件，但如何将其分别应用于每个项目：这是我目前拥有的
但是显示此html时，不允许我分别控制每个
$key的事件。即使确实为每个$ key创建了按钮，单击一个按钮也可以控制所有按钮的
$stats_data{$out}{$key}。我什至尝试将id传递给show / hide脚本，但是没有运气。
最佳答案
您的代码看起来像您正在尝试使用PHP的方式将Perl与HTML混合使用。这在Perl中不起作用。
我尝试过先修复您的Perl代码。这将打印到您的文件句柄（我省略了），但不会提供有效的JavaScript代码。我没有改变，因为我不明白你想做什么。以后再说。
use strict;
use warnings;
# open of $indexfd filehandle goes here..
# print head of HTML page
print $indexfd <<HTML
<html>
<header>
<script type="text/javascript">
function hideit() {
var x1 = document.getElementsByTagName("ol").item(0);
var x = document.getElementsByTagName("ol");
for (var i = 0; i < x.length; i++)
x[i].style.display="none";
}
function showit() {
var x1 = document.getElementsByTagName("ol").item(0);
var x=document.getElementsByTagName("ol");
for (var i = 0; i < x.length; i++)
x[i].style.display="";
}
</script>
</header>
<body>
HTML
;
# If I see this correctly, %stats_data looks like this:
my %stats_data = (
'out1' => {
'key1' => 'val1',
'key2' => 'val2',
},
'out2' => {
'key1' => 'val1',
'key2' => 'val2',
},
);
my $out = 'out1'; # you need the $out from somewhere
# print buttons for each data thingy - you'll want to sort them probably
foreach my $key (sort keys %{$stats_data{$out}}) {
print $indexfd
qq~<input onclick="showit()" type="button" id="$key" value="showit"><br />~,
qq~<input onclick="hideit()" type="button" id="$key" value="hideit"><br/>~,
# Because $stats_data{$out} is a hash ref you need the -> operator here
qq~<ol id="$key"><li><b>$stats_data{$out}->{$key}</b></li></ol><br/>~;
}
print $indexfd qq~<p>more html...</p></body></html>~;
因此，有几件事值得一提。
print $indexfd ("<input onclick=\"showit()\" type=\"button\" id=\"<?perl echo $key; ?>\" value=\"showit\"><br><input onclick=\"hideit()\" type=\"button\" id=\"<?perl echo $key; ?>\" value=\"hideit\"><br><b><ol id=$key>$stats_data{$out}{$key}<ol id=$key> </b><br>");
在这段相当长的代码行中，您使用了
<?perl echo $key; ?>，它看起来像php，但是不起作用。您还使用了<ol id=$key>，因为使用了双引号"..."，所以它起作用。 Perl用“-分隔的字符串内的变量代替它们的值。您不需要类似php的东西。为了节省您自己在HTML代码中转义所有双引号的工作，您可以使用qq-运算符：有关更多信息，请参见perlop。我在评论中解释了有关
%stats_data数据结构的信息。为了打印大部分HTML，我使用了HERE docs。
现在让我们谈谈您的JavaScript。
即使确实为每个
$key创建了按钮，也可以单击一个按钮来控制所有$stats_data{$out}{$key}。这是因为您设计
hideit()和showit()函数的方式。我不是真的想获得什么。如果查看我的%stats_data，您会发现'out1'中有多个键。这样一来，foreach循环就可以为每个键打印一组按钮。按钮和ol都具有与它们的id相同的键。那是不对的。 id-attribute has to be unique。此外，您的html中还有一些基本问题，我也可以自由解决。如果打开
<ol id="foo">容器，则需要像</ol>一样将其关闭。由于<ol>是一个块级元素，因此您不应将内联元素<b>放在它的外面，而应该放在ol的<li>元素（我省略了）之内。最好只将css``style =“ font-weight：bold”分配给li项目，或者最好给它们提供类。对于您要使用JavaScript进行的操作，我将作最后的猜测。如果您有几段文字，并且想用按钮将其隐藏，则可以像此处未经测试的代码那样进行操作。
Javascript：
function toggle(id) {
if (document.getElementById(id).style.display == 'block' ) {
document.getElementById(id).style.display = 'none';
} else {
document.getElementById(id).style.display = 'block';
}
}
HTML：
<div>
<input type="button" name="toggle1" id="toggle1" onclick="toggle('p1')" />
<p id="p1">Lorem ipsum dolor set ... foo a lot of text 1.</p>
<input type="button" name="toggle2" id="toggle2" onclick="toggle('p2')" />
<p id="p2">Lorem ipsum dolor set ... foo a lot of text 2.</p>
</div>
在这种情况下，该功能检查是否显示该段落。显示值需要设置为“ none”或“ block”，因为p元素是块级元素。
如果您需要更多帮助，请尝试发布有关您与脚本一起使用的数据的更多特定信息。
编辑：
在下面的代码中，我将JS函数更改为都以id（键）作为参数。它们仅显示或隐藏与此键关联的列表。我更改了按钮的ID，因此它们不相同。我还在每对按钮和列表周围添加了一个div，以使其更清晰地归属于何处。
use strict;
use warnings;
# open of $indexfd filehandle goes here..
my $indexfd;
# print head of HTML page
print $indexfd <<HTML
<html>
<header>
<script type="text/javascript">
function hideit(key) {
document.getElementById(key).style.display = "none";
}
function showit(key) {
document.getElementById(key).style.display = "";
}
</script>
</header>
<body>
HTML
;
# If I see this correctly, %stats_data looks like this:
my %stats_data = (
'out1' => {
'key1' => 'val1',
'key2' => 'val2',
},
'out2' => {
'key1' => 'val1',
'key2' => 'val2',
},
);
my $out = 'out1'; # you need the $out from somewhere
foreach my $key (sort keys %{$stats_data{$out}}) {
print $indexfd
qq~<div id="div_$key">\n~, # Add a div around the $key-elements
qq~<input onclick="showit('$key')" type="button" id="btn_show_$key" value="showit">\n~,
qq~<input onclick="hideit('$key')" type="button" id="btn_show_$key" value="hideit"><br/>\n~,
qq~<ol id="$key"><li><b>$stats_data{$out}->{$key}</b></li></ol>\n~,
qq~</div>\n~;
}
print $indexfd qq~<p>more html...</p></body></html>~;
关于javascript - 用perl创建html，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/10307755/