Question

我正在使用jQuery photo wall plugin。我希望有一个下拉菜单，让用户可以切换图库。

任何人都可以帮我解决这个问题吗？

这是我到目前为止所拥有的

我不知道如何将修改后的变量转换为AJAX调用。

Answer 1

如果照片墙插件支持使用不同的网址重新加载，则下面的压缩示例应该有效。

$(document).ready(function(){
    // TODO: Init photo wall plugin

    // Moved photo loading AJAX call into a function that can be re-used whenever the photos need to be reloaded...
    var loadPhotos = function(photoUrl) {
        console.log(photoUrl);
        // TODO: Photo loading code goes here
        // $.ajax({url: photoUrl + ...
    }

    // Got rid of the currentURL variable... instead just call loadPhotos with the new URL whenever it needs to change
    $('#gallery-switcher').on('change', function(){
        var value = $('#gallery-switcher option:selected').val();

        if (value == 'home') {
            loadPhotos('https://picasaweb.google.com/data/feed/api/user/106385870100722729161/albumid/5985138864602491185');
        } else {
            loadPhotos('https://picasaweb.google.com/data/feed/api/user/106385870100722729161/albumid/5985463574421076049');
        }
    });

    // Initial load
    loadPhotos('https://picasaweb.google.com/data/feed/api/user/106385870100722729161/albumid/5985138864602491185');
});

我在CodePen上有完整版本但由于某种原因未能保存评论......

Answer 2

您正在更改值，但不会刷新您的照片库内容。 Photowall只运行一次，即文档加载完毕后。

我不熟悉photowall，但我想你需要在onchange事件中重做你的ajax调用，你现在正在更改你的url。每当用户选择其他选项时，您可能需要在onchange中重新加载插件。

我无法帮助你，因为我不是一个照相馆用户，但这是我要采取的步骤：

使photowall init成为一项功能，因此您不会有重复的代码
在文档就绪功能
不确定是否需要，但在下一个点之前清空当前用photowall加载的控件。
在onchange结束时调用该函数

希望这对你有所帮助。

使用jQuery更改AJAX调用中的URL

2 个答案: