基于条件插入元素

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循环正在搜索数组以查看是否可以找到div中的任何一个id 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"] ];​ 数组，如下所示：

{{1}}

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。

---

▼当您拥有if-then的束时，这是how you do it：

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，我们只需将“不适用”附加到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比较的线性数字如果你只需为每次查找加载一次......

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