javascript - 根据div id切换图像CSS

Question

我有多个 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它具有你想要的任何样式。