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

Question

在 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";

Answer 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};