Question

兄弟姐妹是否有错误（＆＃39; .xx＆＃39;）？单击时不想重复图像对不起，我的英语很糟糕:(

＆＃13;

$(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');
  });
});

＆＃13;

.active {
  font-weight: 900;
  color: blue;
}

.hover {
  color: blue;
}

.imga {
  -webkit-filter: grayscale(1);
  filter: grayscale(1);
  margin: auto;
}

＆＃13;

<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>

＆＃13;

Answer 1

为什么不使用active类来更改图像显示？

＆＃13;

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

＆＃13;

.active{
 font-weight:900;
 color:blue;   
}

.item:not(.active) img {
 -webkit-filter: grayscale(1);
 filter: grayscale(1);
 margin:auto;
}

＆＃13;

<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>

＆＃13;

Answer 2

您不需要ID，只需将该类添加到所有img中，然后将其删除以用于当前的

＆＃13;

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

＆＃13;

.active {
  font-weight: 900;
  color: blue;
}

.hover {
  color: blue;
}

.imga {
  -webkit-filter: grayscale(1);
  filter: grayscale(1);
  margin: auto;
}

＆＃13;

<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>

＆＃13;

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>

removeClass和removeClass图像不起作用

3 个答案: