Question

这是我浏览图片的功能：

var src = event.target.src;
        popupImageElem.src = (src);
        //popupImageElem.src = src.replace('/thumb/','/big/');
        TweenLite.to([overlayElem, popupElem], .5, {opacity: 1, visibility: 'visible'});
        $(document).on('click','.left-button',(e) => {
            var srcPrev = this.viewModel.getPrevThumbnailBySrc(popupImageElem.src);
            popupImageElem.src = (srcPrev);
            //popupImageElem.src = srcPrev.replace('/thumb/','/big/');
        });
        $(document).on('click','.right-button',(e) => {
            var srcNext = this.viewModel.getNextThumbnailBySrc(popupImageElem.src);
            popupImageElem.src = (srcNext);
            //popupImageElem.src = srcNext.replace('/thumb/','/big/');
        });

我想在你点击下一步时将图像src / thumb /更改为/ big /但是当你转到下一张图像时它必须再次返回/ thumb /再次在下一张图像上它应该改变/ temp / to / big / again。

如果我取消引用注释代码，它会替换它，但不会更改它，因此它不会找到下一个图像，因为它适用于包含/ thumb /

的url

Answer 1

如果你使用的是JQuery 1.8或以前的版本，你应该看一下Jquery basic .toogle() 这让你做出类似的事情：

$( "#target" ).toggle(function() {
    alert( "First handler for .toggle() called." );
}, function() {
    alert( "Second handler for .toggle() called." );
});

但是，由于它已从Jquery 1.9中删除，您可以创建自己的小插件：来自Felix Kling - ＆gt; here对我来说真的很好。

(function($) {
    $.fn.clickToggle = function(func1, func2) {
        var funcs = [func1, func2];
        this.data('toggleclicked', 0);
        this.click(function() {
            var data = $(this).data();
            var tc = data.toggleclicked;
            $.proxy(funcs[tc], this)();
            data.toggleclicked = (tc + 1) % 2;
        });
        return this;
    };
}(jQuery));

替换src并返回click事件

1 个答案: