使用显示/隐藏单选按钮将数组打印到Div

时间:2016-03-11 13:39:12

标签: javascript html perl

在perl脚本中,我正在将HTML写入屏幕。 我有一些单选按钮,根据单击的单选按钮显示和隐藏div。目前@output正在div中的一行输出数组。

如何将新行中数组中的每个元素输出到下面的div。

@output = split (/\n/, $TESTFILE);
@output2 = split (/\n/, $TESTFILE2);

print "\$(document).ready(function() {\n";
print "    \$(\"div.desc\").hide();\n";
print "    \$(\"input[name\$='visibility']\").click(function() {\n";
print "        var test = \$(this).val();\n";
print "        \$(\"div.desc\").hide();\n";
print "        \$(\"#\" + test).show();\n";
print "    });\n";
print "});\n";

print "<td align=\"left\">Test 1</td><td><input type=\"radio\" name=\"visibility\" value=\"1\"></td>\n";
print "<td align=\"left\">Test 2</td><td><input type=\"radio\" name=\"visibility\" value=\"2\"></td>\n";


print "<td><div id=\"1\" class=\"desc\"> @output </div>\n";
print "<div id=\"10\" class=\"desc\"> @output2 </div></td>\n";

1 个答案:

答案 0 :(得分:1)

将输出分成几部分可能最简单,例如

print qq{<td>\n};

print qq{<div id="1" class="desc">\n};
print "$_<br/>\n" for @output;
print qq{</div>\n};

print qq{<div id="10" class="desc">\n};
print "$_<br/>\n" for @output2;
print qq{</div>\n};

print qq{</td>\n};

但我建议您使用HTML::Tiny而不是使用文字文本构建HTML。至少你应该像这里的文档和不同的字符串分隔符一样使用Perl语法来避免所有这些转义。这是对代码的初始部分的重写,它以相同的方式执行但更清晰的风格

my @output  = split /\n/, $TESTFILE;
my @output2 = split /\n/, $TESTFILE2;

print <<'END_TEXT';
$(document).ready(function() {
    $("div.desc").hide();
    $("input[name$='visibility']").click(function() {
        var test = $(this).val();
        $("div.desc").hide();
        $("#" + test).show();
    });
});
END_TEXT

print qq{<td align="left">Test 1</td><td><input type="radio" name="visibility" value="1"></td>\n};

print qq{<td align="left">Test 2</td><td><input type="radio" name="visibility" value="2"></td>\n};