jquery - 尝试动态更改 div 的类时 addClass 不起作用

Question

http://jsfiddle.net/hdn6e/10/

这里有什么问题？我已经尝试了一切，但似乎没有任何效果

<div class="main">
    <div class="qty" style="float:left">1</div>
    <div class="name" >A</div>    
</div>
<div id="main">
    <div class="qty" style="float:left">2</div>
    <div class="name">B</div>    
</div>
<input type="button" id="ADD">


$('#main').on('click', function(){
        $(this).addClass('selected');
    });
$('.name').on('click', function(){
        $(this).addClass('selected');
    });
$('.qty').on('click', function(){
        $(this).addClass('selected');
    });

$('#ADD').click( function(){
        $(".selected").nearest(".qty").text($(".selected").nearest(".qty").text() +1);
    });

Answer 1

如果问题是您的第二个<div id="main">没有获得selected课程，那是因为您不能在 DOM 上拥有与jsfiddle 示例中相同 ID 的多个项目。

更改main为班级，它将按预期工作。

HTML

<div class="main">
    <div class="qty" style="float:left">1</div>
    <div class="name" >A</div>    
</div>
<div class="main">
    <div class="qty" style="float:left">2</div>
    <div class="name">B</div>    
</div>
<input type="button" id="ADD">

JS

$('.main').on('click', function(){
    $(this).addClass('selected');
});

演示

Answer 2

您的代码正在尝试向每个单击的元素添加一个 CSS 类。如果要添加类属性，请执行以下操作：

$('#main').on('click', function(){
    $(this).attr('class', 'selected');
});

如果要应用 CSS 类，请在样式标签中创建选定的类

<style>
    .selected {
        color: blue;
    }
</style>

然后将其添加到单击的元素

.addClass("selected");