Question

如何删除未单击的所有元素的不透明度。我有一组网格图案的图像。我希望能够点击其中任何一个让其他人消失。我现在可以做到，但我希望它更有活力。

<script>
$(document).ready(function() { 
 $('#grid').click(function() {
  $('#book').animate({
   opacity: '0'.
   }, 1500, function() {
             });
         });
     });
 </script>

</head><body>

    <div class="portfolio">
     <ul id="grid">
       <li><a href="#"id="book"><img src="1.jpg"></a></li>
       <li><a href="#"id="book1"><img src="2.jpg"></a></li>
       <li><a href="#"id="book2"><img src="3.jpg"></a></li>
       <li><a href="#"id="book3"><img src="4.jpg"></a></li>
       <li><a href="#"id="book4"><img src="5.jpg"></a></li>
       <li><a href="#"id="book5"><img src="6.jpg"></a></li>
       <li><a href="#"id="book6"><img src="7.jpg"></a></li>
       <li><a href="#"id="book7"><img src="8.jpg"></a></li>   
       <li><a href="#"id="book8"><img src="9.jpg"></a></li>   
    </ul></div>

我在想什么，如果id不包含id，则单击opacity = 0

Answer 1

你不需要这么乱的ID，保持简单。

<div class="portfolio">
 <ul id="grid">
   <li><a href="#"><img src="1.jpg"></a></li>
   <li><a href="#"><img src="2.jpg"></a></li>
   <li><a href="#"><img src="3.jpg"></a></li>
   <li><a href="#"><img src="4.jpg"></a></li>
   <li><a href="#"><img src="5.jpg"></a></li>
   <li><a href="#"><img src="6.jpg"></a></li>
   <li><a href="#"><img src="7.jpg"></a></li>
   <li><a href="#"><img src="8.jpg"></a></li>   
   <li><a href="#"><img src="9.jpg"></a></li>   
</ul>
</div>

每个事件（在您的情况下单击）都被委托给一个元素，在JS中称为target。你的案例的jQuery也有一些不错的选择器.siblings()，它将针对所有其他元素而不是当前的元素。

$(function() { 
 $('#grid li').click(function() {
   $(this).siblings().animate({opacity: '0'}, 1500);
 });
});

http://jsfiddle.net/Cnjjx/

Answer 2

您是否尝试过使用CSS？也许有两节课 img.clicked { opacity=1.0; } img.notClicked { opacity=0.0; } 然后使用jQuery来设置类。

删除所有图像的不透明度，但用jquery单击

2 个答案: