jQuery动态添加和删除类答案

【问题标题】：Jquery adding and removing class dynamicallyjQuery动态添加和删除类
【发布时间】：2011-01-13 03:40:37
【问题描述】：

我正在尝试在单击链接时添加“选定”类，并且当用户单击下一个链接时，我想删除以前的“选定”类并将“选定”添加到单击的链接中..

-提前致谢

$(document).ready(function() {
$('.news a').click(function(){
  $(this).addClass("selected");
});
});

<div class="news-w">
            <div class="news" id="getnews-1">
            <a href="#" >topic</a>
            </div>
            <div class="news" id="getnews-2">
            <a href="#">topic</a>
            </div>      
            <div class="news" id="getnews-3">
            <a href="#" >topic</a>
            </div>      
            <div class="news" id="getnews-4">
            <a href="#">topic</a>
            </div>      
            <div class="news" id="getnews-5">
            <a href="#">topic</a>
            </div>                      
    </div>

【问题讨论】：

标签： jquery class

【解决方案1】：

$(document).ready(function() {
    $('.news a').click(function(){
         $('.selected').removeClass('selected')
         $(this).addClass("selected");
    });
});

【讨论】：

【解决方案2】：

要在添加类或 ID 时添加切换效果，请使用它。

$(document).ready(function() {
                var count = 1;
                $('#ddown').click(function(){
                count++;
                    if (count % 2 == 0) {
                         $('#ddown').addClass('dropup');
                         $('#ddown').removeClass("dropdown");
                    }else{
                        $('#ddown').removeClass("dropup");
                        $('#ddown').addClass("dropdown");
                    }
                });
            });

是的，我知道，我参加聚会很晚。

【讨论】：

【解决方案3】：

试试

$(document).ready(function() {
    $('div.news-w div.news a').click(function(){
       $('div.news-w div.news a.selected').removeClass("selected");
       $(this).addClass("selected");
    });
});

另外，您的 HTML 无效。您有超过 1 个具有相同 ID 的元素。

【讨论】：

【解决方案4】：

另一个替代解决方案是：

var prevLink = null;
$(document).ready(function() {
    $('.news a').click(function(){
         if(prevLink) prevLink.removeClass('selected');
         prevLink = $(this).addClass("selected");
    });
});

【讨论】：

【解决方案5】：

你可以用这个：

$('.news a').click(function(){
$('.news-w').find('.selected').removeClass('selected');
$(this).addClass("selected");
});

它会被自动删除，只是 div class='news-w'

中的 selected 类

如果你用这个：

$('.selected').removeClass('selected');

当你想将更多元素 a 添加到 DOM 中时 div class='news-w' 它也会被删除..

【讨论】：