0 前言
在 Vue学习笔记6：分别使用纯JavaScript和Vue的v-if 指令来有条件地渲染网页元素_PurpleEndurer@5lcto的技术博客_51CTO博客
的纯JavaScript实现有条件地渲染网页元素中，我们列举了苹果、桔子和葡萄3种水果，并使用3个<p>...</p>来对应，在实现显示用户选择的水果的showFruit函数中，我们利用id把3个<p>...</p>逐一进行操作的：
function showFruit(v)
{
document.getElementById('pApple').style.display = (v=='苹果' ? "inherit" : "none");
document.getElementById('pOrange').style.display = (v=='桔子' ? "inherit" : "none");
document.getElementById('pGrape').style.display = (v=='葡萄' ? "inherit" : "none");
}如果再增加几种水果给用户选择，那么showFruit函数中相应的要添加几行代码进行控制，太麻烦了。
我们可以改用<UL>来实现代码进一步优化和功能进一步改进。
下面我们在 Vue学习笔记6：分别使用纯JavaScript和Vue的v-if 指令来有条件地渲染网页元素_PurpleEndurer@5lcto的技术博客_51CTO博客
1.1 使用click事件 的代码
<script>
function showFruit(v)
{
document.getElementById('pApple').style.display = (v=='苹果' ? "inherit" : "none");
document.getElementById('pOrange').style.display = (v=='桔子' ? "inherit" : "none");
document.getElementById('pGrape').style.display = (v=='葡萄' ? "inherit" : "none");
}
</script>
<p>用JavaScript响应click事件有条件地渲染网页元素</p>
<p style="margin-left:20%; color:purple; font-weight:bold;">
by PurpleEndurer
</p>
<p>你喜欢哪种水果？</p>
<p>
<label>
<input type="radio" value="苹果" name="fruit" onclick="showFruit(this.value)" />
苹果
</label>
</p>
<p>
<label>
<input type="radio" value="桔子" name="fruit" onclick="showFruit(this.value)" />
桔子
</label>
</p>
<p>
<label>
<input type="radio" value="葡萄" name="fruit" onclick="showFruit(this.value)" />
葡萄
</label>
</p>
<p>你喜欢的是：</p>
<p id="pApple" style="color:red">苹果</p>
<p id="pOrange" style="color:orange">桔子</p>
<p id="pGrape" style="color:purple;">葡萄</p>基础上进行优化。
1 通过修改id来完善
1.1 修改<p>...</p>的id
如果使用<p>...</p>来显示用户选择的水果，那我们在showFruit函数中需要通过id来获取和控制这些<p>...</p>的显示。
如果<p>...</p>的id使用"pFruit#"的格式表示，其中#为正整数序列，即1,2,……n：
<p id="pFruit1" style="color:red">苹果</p>
<p id="pFruit2" style="color:orange">桔子</p>
<p id="pFruit3" style="color:purple;">葡萄</p>这样<p>...</p>的id就有章可循了。
1.2 修改showFruit函数
既然代表用户选择水果的<p>...</p>的id就有章可循了，那么我们在showFruit函数中可使用循环语句来进行操作：
function showFruit(v)
{
var o;
for (var i=1; i<4; i++)
{
o = document.getElementById('pFruit'+ i);
o.style.display = (v== o.innerText ? "inherit" : "none");
}
}特别指出一点，就是我们使用 v== o.innerText 代替 了 原来的 v=='苹果' 、v=='桔子' 和 v=='葡萄' ，因为 每个<p>...</p>的innerText就是水果的名称。
完整的代码如下：
<script>
function showFruit(v)
{
var o;
for (var i=1; i < 4; i++)
{
o = document.getElementById('pFruit'+ i);
o.style.display = (v== o.innerText ? "inherit" : "none");
}
}
</script>
<p>用JavaScript响应click事件有条件地渲染网页元素</p>
<p style="margin-left:20%; color:purple; font-weight:bold;">
by PurpleEndurer
</p>
<p>你喜欢哪种水果？</p>
<p>
<label>
<input type="radio" value="苹果" name="fruit" onclick="showFruit(this.value)" />
苹果
</label>
</p>
<p>
<label>
<input type="radio" value="桔子" name="fruit" onclick="showFruit(this.value)" />
桔子
</label>
</p>
<p>
<label>
<input type="radio" value="葡萄" name="fruit" onclick="showFruit(this.value)" />
葡萄
</label>
</p>
<p>你喜欢的是：</p>
<p id="pFruit1" style="color:red">苹果</p>
<p id="pFruit2" style="color:orange">桔子</p>
<p id="pFruit3" style="color:purple;">葡萄</p>运行效果如下：
但是这样修改<p>...</p>的id，还是存在一些问题：一是影响代码的可读性，二是添加水果品类时不够方便，三是showFruit函数中的循环上限数仍然需要根据水果品类数量手工修改，也就是页面元素描述代码和JavaScript脚本代码没有分离。
所以我们还可以继续改进。
2 改用 <ul><li>...</li>来完善
2.1 将<p>...</p>改为 <ul><li>...</li>
即将：
<p id="pFruit1" style="color:red">苹果</p>
<p id="pFruit2" style="color:orange">桔子</p>
<p id="pFruit3" style="color:purple;">葡萄</p> 改为：
<ul id="ulFruit">
<li id="liApple" style="color:red">苹果</li>
<li id="liOrange" style="color:orange">桔子</li>
<li id="liGrape" style="color:purple;">葡萄</li>
</ul>2.2 修改showFruit函数
在代表用户选择结果的水果改用<li>...</li>元素描述后，showFruit函数也需要做相应的修改。
JavaScript可以通过HTML DOM接口访问和修改<li>元素。
具体来说，我们可通过HTML DOM Element 的访问<ul>元素对象，<ul>元素对象的children 属性会返回<ul>元素对象的子元素的对象集合，也就是<li>元素对象集合，这个对象集合类似一个对象数组，所以我们可以数组的方式访问和操作每个<li>元素对象，而且children的length属性保存了<li>元素对象的数量，方便我们使用循环语句进行访问。此外，<li>元素对象的innerText属性就是具体水果名称，方便我们进行判断。
修改后的showFruit函数如下：
function showFruit(v)
{
//获取<li>元素对象集合
var coLi = document.getElementById('ulFruit').children;
//coLi.length 保存了<li>元素对象的数量
//alert(coLi.length);
for (var i = 0; i < coLi.length; i++)
{
coLi[i].style.display = (v==coLi[i].innerText ? "list-item" : "none");
}
}需要特别指出的是，在判断和调整<li>元素对象显示状态的代码中：
(v==coLi[i].innerText ? "list-item" : "none")我们使用 "list-item" （或者""）替换 了 "inherit"。
如果继续使用"inherit"，那么<li>元素前面的符号就不会显示出来。如下图所示：
综合以上修改后完整代码如下：
<script>
function showFruit(v)
{
//获取<li>元素对象集合
var coLi = document.getElementById('ulFruit').children;
//coLi.length 保存了<li>元素对象的数量
//alert(coLi.length);
for (var i = 0; i < coLi.length; i++)
{
coLi[i].style.display = (v==coLi[i].innerText ? "list-item" : "none");
}
}
</script>
<p>用JavaScript响应click事件有条件地渲染网页元素</p>
<p style="margin-left:20%; color:purple; font-weight:bold;">
by PurpleEndurer
</p>
<p>你喜欢哪种水果？</p>
<p>
<label>
<input type="radio" value="苹果" name="fruit" onchange="showFruit(this.value)" />
苹果
</label>
</p>
<p>
<label>
<input type="radio" value="桔子" name="fruit" onchange="showFruit(this.value)" />
桔子
</label>
</p>
<p>
<label>
<input type="radio" value="葡萄" name="fruit" onchange="showFruit(this.value)" />
葡萄
</label>
</p>
<p>你喜欢的是：</p>
<ul id="ulFruit">
<li id="liApple" style="color:red">苹果</li>
<li id="liOrange" style="color:orange">桔子</li>
<li id="liGrape" style="color:purple;">葡萄</li>
</ul>
代码运行效果如下：
3 轻松增加其它水果选项
在上面的代码中，我们只提供了苹果、桔子和葡萄3种水果选项，考虑到用户喜欢的可能不是这3种水果，而是其它的水果，那么我们最好再增加1个“其它”水果选项。
在改用 <ul><li>...</li>后，我们要增加水果选项时，只需要做修改两处描述，而不需要修改showFruit函数了。
3.1 增加 <p>其它</p>描述
在<p>葡萄</p>后增加<p>其它</p>
即将
<p>你喜欢哪种水果？</p>
<p>
<label>
<input type="radio" value="苹果" name="fruit" onchange="showFruit(this.value)" />
苹果
</label>
</p>
<p>
<label>
<input type="radio" value="桔子" name="fruit" onchange="showFruit(this.value)" />
桔子
</label>
</p>
<p>
<label>
<input type="radio" value="葡萄" name="fruit" onchange="showFruit(this.value)" />
葡萄
</label>
</p>改为：
<p>你喜欢哪种水果？</p>
<p>
<label>
<input type="radio" value="苹果" name="fruit" onchange="showFruit(this.value)" />
苹果
</label>
</p>
<p>
<label>
<input type="radio" value="桔子" name="fruit" onchange="showFruit(this.value)" />
桔子
</label>
</p>
<p>
<label>
<input type="radio" value="葡萄" name="fruit" onchange="showFruit(this.value)" />
葡萄
</label>
</p>
<p>
<label>
<input type="radio" value="其它" name="fruit" onchange="showFruit(this.value)" />
其它
<input type="text" id="itTypedName" value="请输入您喜欢的水果名称" /> <input type="button" value="确定" onclick="document.getElementById('liOther').title=document.getElementById('itTypedName').value;" />
</label>
</p>3.2 增加 <li>其它</li>元素描述
在<li>葡萄</li>后增加<li>其它</li>
也就是将
<ul id="ulFruit">
<li id="liApple" style="color:red">苹果</li>
<li id="liOrange" style="color:orange">桔子</li>
<li id="liGrape" style="color:purple;">葡萄</li>
</ul> 改为
<ul id="ulFruit">
<li id="liApple" style="color:red">苹果</li>
<li id="liOrange" style="color:orange">桔子</li>
<li id="liGrape" style="color:purple;">葡萄</li>
<li id="liOther" style="color:blue;">其它</li>
</ul> 即可。
完整的代码如下：
<script>
function showFruit(v)
{
//获取<li>元素对象集合
var coLi = document.getElementById('ulFruit').children;
//coLi.length 保存了<li>元素对象的数量
//alert(coLi.length);
for (var i = 0; i < coLi.length; i++)
{
coLi[i].style.display = (v==coLi[i].innerText ? "list-item" : "none");
}
}
</script>
<p>用JavaScript响应click事件有条件地渲染网页元素</p>
<p style="margin-left:20%; color:purple; font-weight:bold;">
by PurpleEndurer
</p>
<p>你喜欢哪种水果？</p>
<p>
<label>
<input type="radio" value="苹果" name="fruit" onchange="showFruit(this.value)" />
苹果
</label>
</p>
<p>
<label>
<input type="radio" value="桔子" name="fruit" onchange="showFruit(this.value)" />
桔子
</label>
</p>
<p>
<label>
<input type="radio" value="葡萄" name="fruit" onchange="showFruit(this.value)" />
葡萄
</label>
</p>
<p>
<label>
<input type="radio" value="其它" name="fruit" onchange="showFruit(this.value)" />
其它
</label>
</p>
<p>你喜欢的是：</p>
<ul id="ulFruit">
<li id="liApple" style="color:red">苹果</li>
<li id="liOrange" style="color:orange">桔子</li>
<li id="liGrape" style="color:purple;">葡萄</li>
<li id="liOther" style="color:blue;">其它</li>
</ul> 代码运行效果如下：
4 小结
通过改用 <ul><li>...</li>，我们初步实现了页面元素描述代码和JavaScript脚本代码的分离，在我们增加元素描述代码时，不需要修改JavaScript脚本代码。
当然，我们还可以做进一步改进，至少有两个方面：
一个方面是，把表示水果的选项信息存在一个数组里，通过JavaScript输出<li>元素描述代码给用户进行选择。
这样，当我们需要增加水果选项时，只需在存储水果的选项信息数组增加相应的描述就可以了。
另一个方面是，增加文本框，允许用户输入自己喜欢的水果名称，并添加到水果选项列表中。