Question

我想隐藏div中的图像，具体取决于点击次数。如何选择像数组元素那样的imgs？

Theorem eq_img: forall {X:Type} (f: X->X) (x y :X), x = y -> f x = f y.
Proof.  intros X f x y eq1. rewrite <- eq1. reflexivity. Qed.

Answer 1

您需要设置值来计数并递增它。确保图像总数不超过clickCount。

<强> Live Demo

var slider = $('#slides img');    
clickCount = 0;        
 $("#change").click(function(){     
     if(clickCount < slider.length)
        slider.eq(clickCount++).css("visibility","hidden");
 }) ;

如果要旋转图像，则可以在到达最后一张图像时设置第一个索引。我隐藏了所有图像并首先使用jQuery显示document.load，但这可以通过html完成。

Live Demo

var slider = $('#slides img');
slider.hide();
slider.eq(0).show();
clickCount = 0;    
 $("#change").click(function(){
     if(clickCount < slider.length)
           slider.eq(clickCount++).hide();
     if(clickCount == slider.length)
         clickCount = 0;
      slider.eq(clickCount).show();
 }) ;

Answer 2

如果你想隐藏图像，那么使用display equals to none，因为可见性你隐藏了图像，但它也占用了页面上的空间

slider = $('#slides img');    
clickCount = 0;        
$("#change").click(function(){     
   if(clickCount < slider.length)
            slider.eq(clickCount++).css("display","
}) ;

Answer 3

如果你想隐藏图像，而不是改变可见性，那么

$(document).ready(function() {
  var slider = $('#slides img');

  $("#change").click(function() {
    slider.filter(':visible:first').hide()
  });


});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<div id="change">hide me</div>

<div id="slides">
  <img class="image" src="http://www.overlandtojapan.com/images/Mongolia%20Background%20Original.jpg" alt="Mountain View">
  <img class="image" src="http://www.tourisminrussia.com/wp-content/uploads/2014/10/mongolkhans-mongolia.jpg" alt="Mountain View">
</div>

Answer 4

如果您希望删除那些图片一个一个，而不是使用此格式。

    
 $("#change").click(function(){
    $('#slides img:first-child').remove();
 }) ;

#slides img {visibility: visible;width:100px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

<div id="change">Remove Image one by one</div>

<div id="slides">
<img  class="image" src="http://www.overlandtojapan.com/images/Mongolia%20Background%20Original.jpg" alt="Mountain View" >
       <img  class="image" src="http://www.tourisminrussia.com/wp-content/uploads/2014/10/mongolkhans-mongolia.jpg" alt="Mountain View" >
 <img  class="image" src="http://www.tourisminrussia.com/wp-content/uploads/2014/10/mongolkhans-mongolia.jpg" alt="Mountain View" >
 <img  class="image" src="http://www.tourisminrussia.com/wp-content/uploads/2014/10/mongolkhans-mongolia.jpg" alt="Mountain View" >
 <img  class="image" src="http://www.tourisminrussia.com/wp-content/uploads/2014/10/mongolkhans-mongolia.jpg" alt="Mountain View" >
 <img  class="image" src="http://www.tourisminrussia.com/wp-content/uploads/2014/10/mongolkhans-mongolia.jpg" alt="Mountain View" >
 <img  class="image" src="http://www.tourisminrussia.com/wp-content/uploads/2014/10/mongolkhans-mongolia.jpg" alt="Mountain View" >
 <img  class="image" src="http://www.tourisminrussia.com/wp-content/uploads/2014/10/mongolkhans-mongolia.jpg" alt="Mountain View" >
 <img  class="image" src="http://www.tourisminrussia.com/wp-content/uploads/2014/10/mongolkhans-mongolia.jpg" alt="Mountain View" >
 <img  class="image" src="http://www.tourisminrussia.com/wp-content/uploads/2014/10/mongolkhans-mongolia.jpg" alt="Mountain View" >
</div>

选择div的第一个图像作为数组

4 个答案: