Image switchClass（）在第三次单击后交换类

我得到以下信息：

我想切换图像的大小。在每次切换之后，我想用大小合适的实例替换缩放后的图像

这实际上效果很好，但只是第一次。第三次单击后，将分配错误的类

任何帮助都将不胜感激

HTML

JS

var status=true，
obj=$（'.projekt'），
projekte=$.makeArray（obj），
obj=$（“.bilder”），
projekte_li=$.makeArray（obj），
obj=$（'.projekt li img'），
projekte_li_img=$.makeArray（obj）；
var图像=新阵列（2）；
图像[0]=$（''）.attr（{src:'images/mainworks_pre.jpg'}）；
$（'projekt_1'）。单击（函数（）{
如果（状态==真）{
$（“img”，this）.switchClass（“imgKlein”，“imgGross”，1000，“easeInOutQuad”）；
setTimeout（函数（）{
$（projekte_li[0]）.html（图像[1]）；
}, 2000);
状态=假；
}
否则{
$（“img”，this）.switchClass（“imgGross”，“imgKlein”，1000，“easeInOutQuad”）；
setTimeout（函数（）{
$（projekte_li[0]）.html（图像[0]）；
}, 2000);
状态=真；
}
返回false；
});

不知何故，switchClass在替换img的整个html时遇到了问题。事实上，您可以更改src

此外，最好使用jQuery来处理每次单击时前后变化的内容

顺便说一下，setTimeout也会带来问题。具有在动画完成后运行的完整处理程序，您应该使用该处理程序

因此，解决方案可以是：

$('#projekt_1').toggle(
    function(e) {
        $("img", this).switchClass("imgKlein", "imgGross", 1000, "easeInOutQuad", 
            function() {
                $(this).attr({ src: 'images/mainworks_pre.jpg', alt: "Mainworks_pre" });
            }); 
        return false;
        }, 
    function (e) {
        $("img", this).switchClass("imgGross", "imgKlein", 1000, "easeInOutQuad", 
            function(){
                $(this).attr({ src: 'images/mainworks_th.jpg', alt: "Mainworks_TH" });
            });
        return false;
    }
);

---

Fiddle:

我使用jQueryUI中的示例测试了一些东西，它可以正常工作 代码比您的代码略短：

$（函数（）{ $（“#项目1”）。单击（函数（）{ $（“.imgKlein”）.switchClass（“imgKlein”，“imgGross”，1000，“easeInOutQuad”，function（） { $（“img”）.attr（“src”http://www.spielwiki.de/images/e/e9/Kleines_M%C3%A4dchen%2C_zu_gro%C3%9Fer_Luftballon.png"); }); $（“.imgGross”）.switchClass（“imgGross”，“imgKlein”，1000，“easeInOutQuad”，function（） { $（“img”）.attr（“src”http://images.all-free-download.com/images/graphiclarge/small_house_329.jpg"); }))

}))；​

链接到示例：

.imgGross{
    height: 450px;
}

.imgKlein{
    height: 215px;
}​

var status = true,
    obj = $('.projekt'),
    projekte = $.makeArray(obj),
    obj = $('.bilder'),
    projekte_li = $.makeArray(obj),
    obj = $('.projekt li img'),
    projekte_li_img = $.makeArray(obj);

var images = new Array (2);
images[0] = $('<img class="imgKlein"/>').attr({src: 'images/mainworks_th.jpg'});
images[1] = $('<img class="imgGross"/>').attr({src:'images/mainworks_pre.jpg'});

$('#projekt_1').click(function() {
    if (status == true) {
        $("img", this).switchClass( "imgKlein", "imgGross", 1000, "easeInOutQuad" );
        setTimeout(function(){
            $(projekte_li[0]).html(images[1]);
        }, 2000);
        status = false;
    }
    else {
        $("img", this).switchClass( "imgGross", "imgKlein", 1000, "easeInOutQuad" );
        setTimeout(function(){
            $(projekte_li[0]).html(images[0]);
        }, 2000);
        status = true;
    }
    return false; 
});

$('#projekt_1').toggle(
    function(e) {
        $("img", this).switchClass("imgKlein", "imgGross", 1000, "easeInOutQuad", 
            function() {
                $(this).attr({ src: 'images/mainworks_pre.jpg', alt: "Mainworks_pre" });
            }); 
        return false;
        }, 
    function (e) {
        $("img", this).switchClass("imgGross", "imgKlein", 1000, "easeInOutQuad", 
            function(){
                $(this).attr({ src: 'images/mainworks_th.jpg', alt: "Mainworks_TH" });
            });
        return false;
    }
);

    return false;
});