javascript - 使用 perl 创建 html

标签 javascript html perl 

<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 文档。我编写了一个事件 mouseover 和 mouseout 来为每个 perl 变量(在循环上)发生。但看起来事件同时控制了所有变量。如何只编写一次事件但使其能够单独应用于每个项目:这就是我目前所拥有的

但是这个 html 显示时，不允许我单独控制每个 $key 的事件。

尽管确实为每个 $key 创建了按钮，但单击其中一个即可控制所有的 $stats_data{$out}{$key}。

我什至尝试将 id 传递给显示/隐藏脚本，但没有成功。

最佳答案

您的代码看起来像是在尝试以使用 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 -运算符(operator)。请参阅 perlop 了解更多信息。

我解释了%stats_data我的评论中的数据结构。

为了打印大块 HTML，我使用了 HERE docs .

现在我们来谈谈您的 JavaScript。

Even though the buttons do get created for each $key, clicking on one, controls the $stats_data{$out}{$key} of all.

这是因为您设计hideit()的方式和showit()功能。我不太确定你想达到什么目标。如果你看看我的%stats_data你会看到'out1'中有几个键。这使得 foreach 循环为每个键打印一组按钮。这两个按钮都有与其 id 相同的键，ol 也是如此。这是不正确的。安id-attribute has to be unique .

此外，您的 html 中存在一些基本问题，我也冒昧地修复了这些问题。如果您打开 <ol id="foo">容器，您需要像 </ol> 一样关闭它。自 <ol>是 block 级元素，不应该放置内联元素 <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元素是 block 级元素。

如果您需要更多帮助，请尝试发布有关您的脚本所使用的数据的更具体信息。

编辑: 在下面的代码中，我将 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/

上一篇：javascript - 在 jquery 中显示数组中的值

下一篇：javascript - 如何检查是否选择了单选按钮之一？

相关文章：

html - CSS 中 .navbar 和 .navbar a 的区别

html - 如何在另一个上显示一个 div？

regex - 如何使用 Perl 正则表达式解析表示递归数据结构的字符串？

database - 基于选项卡的行拆分会错过空列 - Perl

javascript - 负载名称中的 Node 红色字符串

javascript - 如何避免 Angular 中的嵌套异步 block

javascript - 使用 Require.js 加载 Dropzone.js‏

javascript - 谷歌地图 initMap 函数添加参数

perl - 使 sed 不按行缓冲

javascript - 如何将 js 传单与 Backbone js 集成？

©2024 IT工具网  联系我们