[INSIDER73]

Есть такая структура

<div class="color-viewer-item">
        <img src="...." class="image" />
</div>
<div class="color-viewer-item">
        <img src="...." class="image" />
    </div>
<div class="color-viewer-item">
        <img src="...." class="image" />
    </div>

Есть скрипт который при клике по классу добавляет ему класс,если кликнуть еще раз этот класс убирается,проблема в том,что если кликнуть к примеру на первый color-viewer-item,ему добавится img-big ,но если так же кликнуть на второй color-viewer-item ,ему тоже добавится img-big,и получится каша,как сделать так,чтобы если кликнул к примеру на первый класс,ему присвоился класс из скрипта,а если затем кликнуть на второй класс,то у первого присвоеный класс убрался?

function asd() {
  $('.color-viewer-item').click(function () {
    if ($(this).hasClass('img-big')) {
      $(this).removeClass('img-big');
    } else {
       $(this).addClass('img-big');
     }
   })
}