0

前言：我不是程序员，甚至不是网络开发人员。我是一名印刷设计师，只有足够的信息是危险的。所以，请不要以为我知道一些基本的东西;-)

我正在制作一个内部表单，为我们办公室的非 HTML 人员生成 HTML。它只是一个基本的表单，它接受数据输入并将其连接到适当的 HTML 中。

问题不是所有的字段条目都是必需的。但是，它目前的工作方式只是假设数据存在。

希望这是一个基本问题。但是，我需要在忽略空字段的 javascript 的连接部分中插入一些逻辑。

这是我正在谈论的工作片段：

http://devtest.host.org/testing/sample-form.html

当然，实际的表单有 25 个左右的字段。但是，我在这里对其进行了简化以说明我的观点：假设在表格中只输入了一个项目符号。我需要能够告诉变量“文本”省略第二组

<LI> </LI>

标签，因为没有第二个项目符号数据。

如果有人对如何解决这个问题有一些建议，我将不胜感激。

谢谢。

[编辑：添加代码块]

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Parent Category HTML Generator</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
* {
margin:0;
padding:0;
}
body {
background-color:white;
}
label, textarea {
display:block;
}
</style>
<script type="text/javascript">
window.onload=function() {
document.getElementById('product').onsubmit=function() {
 var Main_Image=document.getElementById('Main_Image').value;
 var Bullet1=document.getElementById('Bullet1').value;
 var Bullet2=document.getElementById('Bullet2').value;


var text="<img src=\"assets/images/"+Main_Image+"\"><br><ul><li>"+Bullet1+"</li><li>"+Bullet2+"</li></ul>";
document.getElementById('code').value=text;
return false;
 }
}
</script>
</head>
<body>

<form id="product" action="#">
Filename: <INPUT TYPE="TEXT" TABINDEX="1" size="40" id="Main_Image"><BR>
Bullet 1: <INPUT TYPE="TEXT" TABINDEX="3" size="50" id="Bullet1"><BR>
Bullet 2: <INPUT TYPE="TEXT" TABINDEX="4" size="50" id="Bullet2"><BR>
<BR>

<input type="submit">
</form>
<BR><BR>

<p>HTML:</p>
<textarea rows="20" cols="80" id="code"></textarea>
</body>
</html>
4

2 回答 2

0

<li></li>一个基本的解决方案是添加后处理并从您的文本变量中删除空节点（例如）。但它不适用于更复杂的情况（例如您的图像）。

我建议您将字符串分成多个步骤，如下所示：

var text=(Main_Image?"<img src=\"assets/images/"+Main_Image+"\"><br>":"")+
         "<ul>"+
         (Bullet1?"<li>"+Bullet1+"</li>":"")+
         (Bullet2?"<li>"+Bullet2+"</li>":"")+
         "</ul>";

(condition?choice1:choice2) 如果条件为真则选择choice1，否则选择choice2。在您的情况下，条件只是知道字符串是否不为空。

于 2012-10-30T21:02:01.910 回答
0

我会采取这种方法：

var Main_Image_present = Main_Image.length > 0;
var Bullet1_present = Bullet1.length > 0;
var Bullet2_present = Bullet2.length > 0;
var text= '';
if(Main_Image_present)
  text += '<img src="assets/images/'+Main_Image+'"><br>';
if(Bullet1_present || Bullet2_present) {
  text += '<ul>';
  if(Bullet1_present)
    text += '<li>'+Bullet1+'</li>';
  if(Bullet2_present)
    text += '<li>'+Bullet2+'</li></ul>';
  text += '</ul>';
}

基本上这只是检查输入值的长度。如果值存在（或长度 > 0），它只会添加必要的 HTML。

于 2012-10-30T21:13:16.807 回答