Question

我有多个div，每个div都有唯一的ID和图像。

我想根据点击的div更改/切换图像css。单击一次，它会更改不透明度。再次单击，它将返回到原始状态。

对此方法的任何想法都将不胜感激。

<div class="card" id="card1"><img src="images/ten.gif" class="icon" /></div>
<div class="card" id="card2"><img src="images/buf.gif" class="icon" /></div>
<div class="card" id="card3"><img src="images/cle.gif" class="icon" /></div>
<div class="card" id="card4"><img src="images/kc.gif" class="icon" /></div>
<div class="card" id="card5"><img src="images/atl.gif" class="icon" /></div>
<div class="card" id="card6"><img src="images/min.gif" class="icon" /></div>
<div class="card" id="card7"><img src="images/nyg.gif" class="icon" /></div>
<div class="card" id="card8"><img src="images/mia.gif" class="icon" /></div>
<div class="card" id="card9"><img src="images/stl.gif" class="icon" /></div>
<div class="card" id="card10"><img src="images/hou.gif" class="icon" /></div>
<div class="card" id="card11"><img src="images/chi.gif" class="icon" /></div>
<div class="card" id="card12"><img src="images/pit.gif" class="icon" /></div>
<div class="card" id="card13"><img src="images/ind.gif" class="icon" /></div>
<div class="card" id="card14"><img src="images/no.gif" class="icon" /></div>

...等

Answer 1

如果您使用以下代码：

$(".card").click(function() {
    $(this).find(".icon").toggleClass("transparent");
});

然后你可以定义一个CSS类.transparent，它具有你想要的任何样式。

Answer 2

试试这个：

$(document).ready(function(){
    $('.card').toggle(function(){
       $(this).children('icon').css('opacity','0.5');
    }, function(){
       $(this).children('icon').css('opacity','1');
    });
});

如果您想为效果设置动画：

$(document).ready(function(){
    $('.card').toggle(function(){
       $(this).children('icon').animate({'opacity':0.5},500);
    }, function(){
       $(this).children('icon').animate({'opacity':1},500);
    });
});

Answer 3

这将给你一个很好的动画效果纯粹来自jquery，所以不需要额外的CSS ...

$(".card").toggle(function() {
    $(this).find("img").animate({ opacity: 0.25 });
},
function() {
    $(this).find("img").animate({ opacity: 1 });
});

它只是切换不透明度 - 第一次点击0.25，下次点击1，下次点击0.25等。

这是一个有效的例子......

http://jsfiddle.net/uHpqf/1/

Answer 4

不幸的是，.toggle只能以有限的方式工作，但你可以使用三元运算符和一些jiggery pokery来使它工作 - 如果你不能或不想创建一个选项，这是一个选项新的CSS类。

$('.card').click(function ()
{
    $('.icon', this).css( 'opacity', (parseFloat($('.icon', this).css('opacity')) == 0.5 ? 1 : 0.5) );
}

基于div id切换图像css

4 个答案: