Question

我在HTML 4x2中列出了一些图像。我的脚本目前正在使用.addClass（）扩展每个图像，但是在图库中的第一个图像上只会显示.removeClass（）。

我怎么能这样做.removeClass（）可以应用于每个图像？ - 这是我的代码：

$(document).ready(function () {
    $('#fig').delegate('img', 'click', function () {
        $(this).addClass("imgbig");
        $('.xbutton').stop(true, true).fadeTo(800, 1);
        $("#fig").stop(true, true).addClass("f1");
    });

    $('.xbutton').click(function () {
        $('#imgSmall').removeClass("imgbig");
        $('.xbutton').stop(true, true).fadeOut(800, 0);
        $("#fig").stop(true, true).removeClass("f1");
    });
});

Answer 1

在此$('#imgSmall').removeClass("imgbig")您选择ID为imgSmall的图片，而不是您拥有的所有图片。

我想你应该像下面那样改写你的回调：

$('.xbutton').click(function(){
    $(".imgbig").removeClass("imgbig");
    $('.xbutton').stop(true, true).fadeOut(800, 0);
    $("#fig").stop(true, true).removeClass("f1");
});

Answer 2

请你发贴html吗？我猜你有一堆图像，当你点击它们时，图像会扩展，当你点击关闭按钮时图像会缩小？

$(function() {
  $('#fig').on('click','img', function(){
    $(this).addClass("imgbig");
    $('.xbutton').stop(true, true).fadeTo(800,1);
    $("#fig").stop(true, true).addClass("f1");
  });

  $('#fig').on('click', '.xbutton', function(){
    // this line may be wrong depending on where your button is in relation to the image
    $(this).stop(true, true).fadeOut(800, 0).find('.imgSmall').removeClass('imgbig');
    $('#fig').stop(true, true).removeClass("f1");
  });
});

注意：我将imgSmall更改为一个类，因为我猜测所有小图像都具有相同的类，ID应该始终是唯一的。

.removeClass（）只工作一次

2 个答案: