javascript - 使用多个 div 的单击功能不起作用

Question

这里我使用四个 div，当我点击第一个 div 时，其他所有 div 都变得不透明，它工作正常，我想要当我首先移动到其他 div div 时，不透明度仍然没有变化

$(document).ready(function () {
    $(".category-item").click(function () {
        $(this).addClass("black");
        $(".category-item").addClass("blue");
    });
});

提前致谢，

Answer 1

您没有编写有效的 html 代码 - 请参阅:

<div class="category-item" >
    <div class="img-responsive center-block">   </div>      
</div>
<div class="category-item" >
    <div class="img-responsive center-block">   </div>          
</div>
<div class="category-item" >
    <div class="img-responsive center-block">   </div>      
</div>
<div class="category-item" >
    <div class="img-responsive center-block">   </div>  
</div>

和js:

$(document).ready(function(){
    $(".category-item").click(function(){
        $(".category-item").addClass("blue");
        $(this).addClass("black").removeClass("blue");
    });


});

参见 demo