Javascript 根据选择更改下拉文本

具有以下代码，工作正常：

<div class="btn-group"> 
    <a class="btn mini all" id="showall" href="javascript:void(0);" data-toggle="dropdown">All<i class="fa fa-angle-down "></i></a>
    <ul class="dropdown-menu">
        <li><a href="javascript:void(0);" class="none">None</a>
        </li>
        <li><a href="javascript:void(0);" class="read">Read</a>
        </li>
        <li><a href="javascript:void(0);" class="unread">Unread</a>
        </li>
    </ul>
</div>

现在我要做的是，如果我选择none，它应该将none放在顶部，将all放在none的位置，和其他两个read和unread相同

下面是我对jquery的尝试，我缺少或重叠了一些东西，所以在切换时它用all替换all和none

$(document).on('click','.none',function(e) {
        $("#showall").html('').html("None <i class='fa fa-angle-down'></i>");
        $(".none").html('').html('All').removeClass('none').addClass('new');
    });
    $(document).on('click',".read", function(e) {
        var data = $("#showall").text();
        $("#showall").html('').html("Read <i class='fa fa-angle-down'></i>");
        $(".read").html('').html(data).removeClass('read').addClass('new');;
    });
    $(document).on('click',".unread", function(e) {
        var data = $("#showall").text();
        $("#showall").html('').html("Unread <i class='fa fa-angle-down'></i>");
        $(".unread").html('').html(data).removeClass('unread').addClass('new');
    });
    $(document).on('click',".new", function(e) {
        var data = $("#showall").text();
        $("#showall").html('').html("All <i class='fa fa-angle-down'></i>");
        $(".new").html('').html(data).removeClass('new read unread').addClass('none');
    });

$（文档）.on（'click'，'none'，函数（e）{
$（“#showall”）.html（“”）.html（“无”）；
$（“.none”）.html（“”）.html（'All'）.removeClass（'none'）.addClass（'new'）；
});
$（文档）.on（'click'，.read'，函数（e）{
var data=$（“#showall”）.text（）；
$（“#showall”）.html（“”）.html（“读取”）；
$（“.read”）.html（“”）.html（数据）.removeClass（'read'）.addClass（'new'）；；
});
$（文档）.on（'click'，“.unread”，函数（e）{
var data=$（“#showall”）.text（）；
$（“#showall”）.html（“”）.html（“未读”）；
$（“.unread”）.html（“”）.html（数据）.removeClass（'unread'）.addClass（'new'）；
});
$（文档）.on（'click'，.new'，函数（e）{
var data=$（“#showall”）.text（）；
$（“#showall”）.html（“”）.html（“全部”）；
$（“.new”）.html（“”）.html（数据）.removeClass（'new read unread'）.addClass（'none'）；
});

首先，您应该为所有

项目指定一个公共类，例如“clickable”

然后你可以这样写：

// bind 'onclick' event to all your links
$('.clickable').click(function(event){
    // replaces your javascript:void(0) as Frondor suggests
    event.preventDefault();
    // if clicked element is not a direct child of '.btn-group' (currently 'selectall')
    if($(this).parent('.btn-group').lenght === 0){
        // move the direct child of '.btn-group' (currently 'selectall') after the clicked element
        $(this).after($('.btn-group>a'));
        // move the clicked element to the beginning of the '.btn-group'
        $('.btn-group').prepend($(this));
    }
});

---

我不确定您使用的所有这些类和ID是什么，尤其是这个

标记。但是，如果每次确实需要添加它们，您可以在此事件回调中执行此操作。

如果您尝试将主（顶部）链接与

下拉菜单中单击的链接交换，则可以按如下方式执行：

$(function () {
    $(document).on('click', '.dropdown-menu a', function (e) {
        e.preventDefault();

        var ddClass = $(this).attr('class');
        var ddHref = $(this).attr('href');
        var ddText = $(this).text();        

        var $a = $('.btn-group a.btn');
        var aClass = $a.attr('class');
        var aId = $a.attr('id');
        var aHref = $a.attr('href');
        var aText = $a.text();

        $a.replaceWith(function () {
            var $newA = $('<a>', { 
                href: ddHref, 
                id: ddClass,
                class: aClass,
                'data-toggle': 'dropdown'                
            }).text(ddText);

            var $newI = $('<i>', { class: 'fa fa-angle-down' });         
            $newA.append($newI);

            return $newA;
        });

        $(this).replaceWith(function () {
            return $('<a>', { 
                href: aHref, 
                class: aId                
            }).text(aText);
        });
    });
});

$（函数（）{
$（文档）。在（'单击'，'上。下拉菜单a'，函数（e）{
e、 预防默认值（）；
var ddClass=$（this.attr（'class'）；
var ddHref=$（this.attr（'href'）；
var ddText=$（this.text（）；
变量$a=$（'.btn组a.btn'）；
var aClass=$a.attr（'class'）；
var-aId=$a.attr（'id'）；
var aHref=$a.attr（'href'）；
var aText=$a.text（）；
$a.replaceWith（函数（）{
变量$newA=$（'

注意：如评论中所述，避免使用
href=“javascript:void（0）；”
，因为它会搞砸搜索引擎优化。
仅供参考：不要使用javascript:void（0）；它会杀死搜索引擎优化，使用
event.preventDefault（）；
代替或
返回false；
$（'.btn group'）。prepand（$（此））；
应该是
.prepend（）
但无论如何，我认为代码不起作用。@Frondor谢谢，修复了输入错误。但是在这段代码中什么不起作用呢？不是
$（'.btn group'）。prepend（$（this））；
实际上是“预挂起”整个
.btn group
元素和childs？不，它正在移动$（this），它是被单击的元素，将是“.btn group”.prependTo（）中的第一个元素。酷！但是class.dropdown菜单也用于其他部分，因此它覆盖了所有我可以在此处执行其他操作的元素