0

我正在使用一个 jQuery 网格滑块插件，我想在 DOM 操作后再次运行它。

我怀疑我的问题与此类似 -在 DOM 修改后重新运行 jQuery 插件的任何方法？- 但我的尝试是行不通的。

这是设置：

当页面加载时，网格插件 js 和选项 js 针对无序列表运行，如下所示：

<div class="panel">
    <div class="g-container">
        <div class="g-slider">        
            <div class="tiles">
                <ul>                
                    <li><a href="#"><img src="Images/image-01.jpg"></a><div><h1>automotive</h1></div></li>                                          
                    <li><a href="#"><img src="Images/image-03.jpg"></a><div><h1>electronics</h1></div></li>                                             
                    <li><a href="#"><img src="Images/image-02.jpg"></a><div><h1>medical</h1></div></li>                                             
                    <li><a href="#"><img src="Images/image-11.jpg"></a><div><h1>automotive</h1></div></li>                                          
                    <li><a href="#"><img src="Images/image-02.jpg"></a><div><h1>automotive</h1></div></li>                                          
                    <li><a href="#"><img src="Images/image-09.jpg"></a><div><h1>medical</h1></div></li>                                             
                    <li><a href="#"><img src="Images/image-11.jpg"></a><div><h1>electronics</h1></div></li>                                             
                </ul>             
            </div>
        </div> 
    </div>
</div>

...并创建网格滑块。这是一个示例：http: //1.s3.envato.com/files/27300390/index.html

这一切都很好。

（长话短说）我有一个很大的类别列表，这些类别都组合在一起，我放在一个 div 持有者中，如下所示：

<div id="listing-holder">
    <ul>                
        <li><a href="#"><img src="Images/car-01.jpg"></a><div><h1>automotive</h1></div></li>                                            
        <li><a href="#"><img src="Images/car-01.jpg"></a><div><h1>electronics</h1></div></li>                                           
        ...
    </ul>
</div>

这些类别是动态创建的，并且在一个大（隐藏在页面之外）组中。所以可能有 20 个类别和 100 个项目（在我的示例中为图像）。这些项目可能出现在多个类别中，但我只想一次显示一个。

页面上的其他地方是一些导航链接。单击其中一个链接时，#listing-holder 中的项目将复制到 .tiles ul 中。然后根据 .tiles ul 中的标题标签检查它的名称，删除任何不匹配的项目。然后，我希望插件再次运行，以便分页和滑块像更改之前一样工作，但使用新的分页（如果它或多或少）。像这样：

$("#left-menu").delegate("a", "click", function(e) {
    var itemClicked;
    itemClicked = $(this).text();
    $('.g-container .g-slider .tiles').html('');
    $('.g-container .g-slider .tiles').html($('#listing-holder').html());
    $(".g-container .g-slider .tiles h1:not(:contains(" + itemClicked + "))").closest('li').remove();
    init(); // this isn't working the way I expected it to
});

这是选项js的（相关信息）：

$(document).ready(  
    function() {
        var $panel = $(".panel");       
        var $container = $panel.find(".g-container");
        ... // more variables

        $(".g-container").gridSlider({
            num_cols:5,
            num_rows:3,
            ... // more settings
        });

        $submitButton.click(function() {
            $container.undoChanges()
            .setGridSize($gridCol.val(),$gridRow.val())                   
            .setNoCategory($categories.filter(":checked").val() == "no")
            ... // more settings
            .updateChanges(); // this is in the grid.js         
            setPanelWidth();
        });

        $resetButton.click(function() {
            init();
            $submitButton.trigger("click");
        });

        var init = function() {
            $gridCol.val(5);
            $gridRow.val(3);
            ... // more settings
        }

        var setPanelWidth = function() {
            var width = $container.find(">div").outerWidth();
            if (width < panelWidth) {
                width = panelWidth; 
            }
            $panel.css({width:width, marginLeft:-width/2});
            ... // more settings
        }

        init();
    }
);

我试过调用 init 函数，它确实调用了它，但似乎什么也没发生。我在 grid.js（已缩小）的开头和结尾放置了警报，它们都被触发了，所以看起来它正在通过。

我想我必须使用这样的东西：

(function( $ ){
    $.fn.myPlugin = (function(){
        {
        // do something...
        }
    });
})(jQuery);

...但是因为我能够从 options.js 调用 init，所以我没有走那条路（但我愿意重新访问它，因为我可能错误地实现了它）。

我已经在这里待了大约一个星期，我怀疑我正在接近这个错误，并且可以使用一些方向。

我想我可以通过创建所有类别来解决这个问题，然后使用 getScript() 之类的东西来运行。我认为那会奏效。问题是可能有几十个类别，其中的项目可能出现在几个类别中。

我想（与手打交道）如果我只有一个列表并根据点击从该列表中选择我需要的东西，那将是要走的路。我可以成功地做到这一点。它只是将它连接到不起作用的滑块上。

如果我需要提供更多详细信息，请告诉我。

谢谢。

斯蒂芬

4

1 回答 1

0

我不熟悉网格滑块插件。但是您是否尝试过完全破坏容器 DOM，然后重新创建并插入它。然后在新创建的 DOM 上再次调用 .gridSlider 函数？

于 2013-04-25T04:17:02.547 回答