jquery增加和減少zomming不起作用

Question

我正在使用增加和減小縮放圖像，但我想顯示 當用戶單擊圖像時減少。當我嘗試這個代碼時;減少不起作用 ..爲什麼？

<script type='text/javascript'> 
$(window).load(function(){ 
    var cell = $('#pok'); 
    $('.increase').click(function(){ 
     cell.height(cell.height()+20); 
     $(".title").html('<a href="#" class="decrease">Decrease</a>') 
    }); 
    $('.decrease').click(function(){ 
     cell.height(cell.height()-20); 
    }); 
}); 
</script> 
<img src="/41.jpg"id="pok"class="increase"><span class="title"></span> 

Answer 1

使用on()爲dynamically created elements像更換.click，

$(document).on('click','.decrease',function() { 
    cell.height(cell.height() - 20); 
}); 

還利用$(function(){代替$(window).load(){看到difference

Working Demo

Answer 2

與.on

$(window).load(function(){ 
var cell = $('#pok'); 
$('.increase').click(function(){ 
    cell.height(cell.height()+20); 
$(".title").html('<a href="#" class="decrease">Decrease</a>') 
}); 
$('.decrease').on("click",function(){ 
    cell.height(cell.height()-20); 
}); 

}); 

文檔從on()功能

This method is a shortcut for .bind('click', handler) 

Answer 3

你所面臨的問題是，當你選擇與類.decrease你得到0元素，因爲你重視它只是當你點擊的元素增加。

改變「.decrease」選擇爲「.title僞」，也將努力

Answer 4

試試這個：

<script type='text/javascript'> 
    jQuery(document).ready(function($){ 
     $('.increase').click(function(){ 
      var cell = $(this); 
      cell.height(cell.height()+20); 
      $(this).find(".title").html('<a href="#" class="decrease">Decrease</a>'); 
     }); 
     $('.decrease').click(function(){ 
      var cell = $(this).parent().find('.increase'); 
      cell.height(cell.height()-20); 
     }); 
    }); 
</script> 

<img src="/41.jpg"id="pok"class="increase"><span class="title"></span>