removeClass和removeClass圖片不起作用

Question

兄弟姐妹（'。xx'）是否有錯誤？ 點擊 遺憾時，不要想重複的形象，我的英語是如此糟糕:(

$(document).ready(function() { 
 
    //$(".ok").removeClass("imga"); 
 
    //$('.ok2').removeClass('imga').siblings('.ok2').addClass("imga"); 
 
    $('.item').click(function() { 
 
    var id = $(this).attr('id'); 
 
    var xx = "ok" + id; 
 
    $('.ok' + id).removeClass('imga').siblings('.xx').addClass("imga"); 
 
    $(this).addClass('active').siblings().removeClass('active'); 
 
    }); 
 
});

.active { 
 
    font-weight: 900; 
 
    color: blue; 
 
} 
 

 
.hover { 
 
    color: blue; 
 
} 
 

 
.imga { 
 
    -webkit-filter: grayscale(1); 
 
    filter: grayscale(1); 
 
    margin: auto; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="item" id="1"> 
 
    <img class="ok1 imga" src="http://icons.iconarchive.com/icons/ampeross/qetto/128/icon-developer-icon.png"><br> 
 
    image 1 
 
</div> 
 
<div class="item" id="2" width="50" width="50"> 
 
    <img class="ok2 imga" src="http://icons.iconarchive.com/icons/ampeross/qetto/128/icon-developer-icon.png"><br> 
 
    image 2 
 
</div> 
 
<div class="item" id="3" width="50" width="50"> 
 
    <img class="ok3 imga" src="http://icons.iconarchive.com/icons/ampeross/qetto/128/icon-developer-icon.png"><br> 
 
    image 3 
 
</div>

Answer 1

爲什麼不使用active類來改變圖像顯示也？

$('.item').click(function(){ 
 
    $(this).addClass('active').siblings().removeClass('active'); 
 
});

.active{ 
 
font-weight:900; 
 
color:blue; 
 
} 
 

 
.item:not(.active) img { 
 
-webkit-filter: grayscale(1); 
 
filter: grayscale(1); 
 
margin:auto; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="item" id="1"><img class="ok1 imga" src="http://icons.iconarchive.com/icons/ampeross/qetto/128/icon-developer-icon.png"><br>image 1</div> 
 
<div class="item" id="2" width="50" width="50"><img class="ok2 imga" src="http://icons.iconarchive.com/icons/ampeross/qetto/128/icon-developer-icon.png"><br>image 2</div> 
 
<div class="item" id="3" width="50" width="50"><img class="ok3 imga" src="http://icons.iconarchive.com/icons/ampeross/qetto/128/icon-developer-icon.png"><br>image 3</div>

Answer 2

你不需要IDS，你只需要將該類添加到所有的IMG，然後將其刪除當前一個

$(document).ready(function() { 
 

 
    $('.item').click(function() { 
 
    $(this).addClass('active').siblings().removeClass('active'); 
 
    $('.item img').addClass('imga'); 
 
    $(this).find('img').removeClass('imga'); 
 
    }); 
 
});

.active { 
 
    font-weight: 900; 
 
    color: blue; 
 
} 
 

 
.hover { 
 
    color: blue; 
 
} 
 

 
.imga { 
 
    -webkit-filter: grayscale(1); 
 
    filter: grayscale(1); 
 
    margin: auto; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="item" id="1"><img class="ok1 imga" src="http://icons.iconarchive.com/icons/ampeross/qetto/128/icon-developer-icon.png"><br>image 1</div> 
 
<div class="item" id="2" width="50" width="50"><img class="ok2 imga" src="http://icons.iconarchive.com/icons/ampeross/qetto/128/icon-developer-icon.png"><br>image 2</div> 
 
<div class="item" id="3" width="50" width="50"><img class="ok3 imga" src="http://icons.iconarchive.com/icons/ampeross/qetto/128/icon-developer-icon.png"><br>image 3</div>

Answer 3

$(document).ready(function() { 
 
    $('.item').click(function() { 
 
    var $this = $(this); 
 
    $this.children().removeClass('imga').end().addClass('active'); 
 
    $this.siblings().removeClass('active').children('img').addClass('imga'); 
 
    }); 
 
});

.active { 
 
    font-weight: 900; 
 
    color: blue; 
 
} 
 

 
.hover { 
 
    color: blue; 
 
} 
 

 
.imga { 
 
    -webkit-filter: grayscale(1); 
 
    filter: grayscale(1); 
 
    margin: auto; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="item" id="1"> 
 
    <img class="ok1 imga" src="http://icons.iconarchive.com/icons/ampeross/qetto/128/icon-developer-icon.png"><br> 
 
    image 1 
 
</div> 
 
<div class="item" id="2" width="50" width="50"> 
 
    <img class="ok2 imga" src="http://icons.iconarchive.com/icons/ampeross/qetto/128/icon-developer-icon.png"><br> 
 
    image 2 
 
</div> 
 
<div class="item" id="3" width="50" width="50"> 
 
    <img class="ok3 imga" src="http://icons.iconarchive.com/icons/ampeross/qetto/128/icon-developer-icon.png"><br> 
 
    image 3 
 
</div>