追加和jQuery答案

【问题标题】：Append and jquery追加和jQuery
【发布时间】：2014-02-18 09:30:33
【问题描述】：

我在制作导航时遇到了一些问题，希望有人能帮助我。

我需要我当前的列表，这样当我推送另一种颜色的链接时，它会删除选择的链接并添加这个链接。所以我当时只能有1个链接。

HTML

<div class="trail"></div>
<ul class="navigation">
    <li><a class="orange" href="#">Link1</a>
    </li>
    <li><a class="black" href="#">Link2</a>
    </li>
    <li><a class="green" href="#">Link3</a>
    </li>
</ul>

CSS

.trail {
    background-color:#ccc;
    padding:20px;
    margin-bottom:10px;
}
.trail > a {
    color:#ffffff;
}
.navigation {
    padding:20px;
    margin:0;
    background-color:#ccc;
    list-style:none;
}
.navigation > li > a {
    color:#ffffff;
} 
.orange {
    background-color:orange;
}
.black {
    background-color:black;
}
.green {
    background-color:green;
}

JQUERY

var count = 0;

    $('.navigation > li > a').on('click', function (e) {
        e.preventDefault();
        if (count < 1){
            var $addinput = $('.trail').append('<a href="#" class="' + $(this).attr('class') + '">' + $(this).html() + '</a>');            
            $('i').append($addinput);    
            count++;
        } 

    });

我也做了这个小提琴：http://jsfiddle.net/iBertel/LpX4R/2/

【问题讨论】：

标签： jquery css navigation

【解决方案1】：

您可以简单地清空路径：

$('.navigation > li > a').on('click', function (e) {
    var $addinput = $('<a>').addClass(this.className).html(this.innerHTML);
    $('.trail').empty().append($addinput); // <= empty then append
    e.preventDefault();
});

Demonstration

请注意，我还简化了您的元素创建并删除了字符串连接。

【讨论】：

啊，太完美了——而且速度如此之快。干杯它完美地工作。当我允许时，我会接受答案。

【解决方案2】：

您只需使用.clone() 和.html() 即可高效完成任务。

试试，

$('.navigation > li > a').on('click', function (e) {
    e.preventDefault();
    $(".trail").html($(this).clone());
});

DEMO

【讨论】：

【解决方案3】：

这应该可以解决问题：

$('.navigation > li > a').on('click', function (e) {
    e.preventDefault();
    $('.trail a').remove();
    var $addinput = $('.trail').append('<a href="#" class="' + $(this).attr('class') + '">' +     $(this).html() + '</a>');
    $("i").append($addinput);
});

【讨论】：