Question

我正在使用增加和减少缩放图像，但我想显示用户点击图片时减少。当我尝试这段代码时;减少不起作用 ..why？

<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

将.click替换为.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 2

dynamically created elements使用on()，

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

同时使用$(function(){代替$(window).load(){，请参阅difference

Working Demo

Answer 3

您面临的问题是当您选择具有类.decrease的元素时，您会获得0个元素，因为您在单击增加时附加它。

更改“.title”的“.decrease”选择器，它将起作用

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>

Jquery增加和减少Zomming不起作用

4 个答案: