根据条件插入元素

Question

我想在检查条件后动态插入不同的 url

这是伪代码

If div.id = "abc" then
create url <a href="www.zzz.html"'>Cosmetics</a>');
Append url to div

else if div.id = "xyz" then
create url <a href="www.abc.html"'>LEather goods</a>');
Append url to div

else if div.id = "mno" then
create url <a href="www.kkk.html"'>Diapers</a>');
Append url to div

等等。

如何在 JavaScript/jQUery 中编写此代码。如果有 15 个这样的 If-Else 条件，如何高效处理代码。

这段代码看起来不太好

if $("#abc) then

 var dynLink = $('<a href=zzz.html"'>Cosmetics</a>');
    $("#abc").append(dynLink);

else if $("#xyz")
 var dynLink = $('<a href=abc.html"'>LEather</a>');
    $("#xyz").append(dynLink);

谢谢！

Answer 1

你可以试试这个：

var link = [
    ["#abc", "#wfh", "http://www.123.com", "Maine"],
    ["#123", "#qwe", "http://www.abc.com", "Texas"]
];

$.each(link, function(e) {
    $(link[e][0] + "," + link[e][1])
        .append("<a href='" + link[e][2] + "'>" + link[e][3] + "</a>");
});​

示例：http://jsfiddle.net/Yvuvh/5/

---

这只是简单地设置数组中的链接和标题，for 循环正在搜索数组以查看它是否可以找到带有任何id 的div，如果所以，然后附加适当的链接。

要添加更多，只需将另一个 array 添加到 link 数组中，如下所示：

var link = [
    ["#abc", "#wfh", "http://www.123.com", "Maine" ],
    ["#123", "#qwe", "http://www.abc.com", "Texas" ],
    ["#xyz", "#zyx", "http://www.yzx.com", "Mexico"]
];​

Answer 2

if $("#abc) then

 var dynLink = $('<a href=zzz.html"'>Cosmetics</a>');
    $("#abc").append(dynLink);

else if $("#xyz")
 var dynLink = $('<a href=abc.html"'>LEather</a>');
    $("#xyz").append(dynLink);

▲ 那是不是有效的 JavaScript。

---

▼ 这是how you do it，当你有一堆 if-thens：

switch(div.id){
    case "abc":
        $('<a href="zzz.html">Cosmetics</a>').appendTo("div#whateveritis");
        break;
    case "xyx":
        $('<a href="abc.html">Leather</a>').appendTo("div#whateveritis");
        break;
    case "more more more":
        //same stuff here.
        break;
    default:
        //default
        break;
}

对于初学者来说非常不言自明。 ;)

说真的，您应该开始查看MDN 中的内容。它是 JavaScript 参考和演示（示例）的好地方。

Answer 3

创建一个包含所有这些关系的对象，如下所示：

var links = {
    'abc': { link:'foo.html', text:'Foo Link' },
    'xyz': { link:'bar.html', text:'Bar Link' }
};

然后我们将添加几个div 元素来测试一下：

​<div id="abc"></div>
<div id="xyz"></div>​​​​​​​​​​
<div id="foo"></div>

最后是我们的 jQuery，它应该为我们添加一些链接：

$("div").append(function(){
    var link = links[this.id];
    return link ? $("<a>", { href:link.href, html:link.text }) : "n/a" ;
});​​​

这将遍历我们所有的div 元素，检查它们的id 是否在我们的links 对象中找到。如果是，那么我们在该div 中放置一个具有适当属性的链接。如果在我们的对象中没有找到id，我们只需将“n/a”附加到div。

<div id="abc"><a href="foo.html">Foo Link</a></div>
<div id="xyz"><a href="bar.html">Bar Link</a></div>
<div id="foo">n/a</div>

演示：http://jsfiddle.net/vFjSw/

Answer 4

将 div.id 放入映射到目标 URL 的关联数组中，然后通过键查找。一个散列查找击败了线性数量的 if/else-if 比较 if 您只需为每次查找加载一次...

无论微观性能如何，这让我觉得它更“优雅”、可读或可维护。对我来说，make array v. run if/else if 哪个更快并不明显，你必须进行分析。但是，如果您 1) 必须针对时间进行优化，并且 2) 每次加载页面时只期望使用一次此代码，那么您能做的最好的事情就是将您期望的 url 放在 if/elif 块的顶部。请务必准确评论您正在执行此操作，以便未来的开发人员不会按字母顺序排列它们。