0

嘿，我在一个表中有一个带有 jQ​​uery-UI 对象的站点。我所做的是将表保存在本地存储中，这样用户可以加载不同的“项目”。

现在，在我加载保存的表格后，我还更新了所有按钮等的处理程序。之后工作正常。但是不再提供所有 jQuery-Uis 的功能。我在 updateHandlers 函数中尝试了以下代码：

//Initial setup for jQuery UI
$( '#infoImg' ).tooltip();
$( '#volSlider' ).slider({ max: 100, min: 0});

但这仅适用于我表中元素的第一次出现。所有其他人都不工作。

我只是 jQuery 和 Javascript 的初学者，也许我做错了什么……但它是什么？

我厌倦了 updateHandler 函数中的其他内容：

$(this).parent().find( '.infoImg' ).tooltip();
$(this).parent().find( '.volSlider' ).slider({ max: 100, min: 0});

但现在它对任何人都不起作用..

HTML是：

    <img id="infoImg" src="images/info_s.png" height="30" width="30" title="What">
<div id="volSlider" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" aria-disabled="false"><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 18%;"></a></div>

这段代码在我表的每一行中重复出现..

我现在也用 jQuery 的 .each() 函数尝试了它。但没有成功：

 $('.volSlider').each(function(index, elem) {
                $(this).slider({ max: 100, min: 0});
            });

如果您需要，我很乐意发布其他信息或代码。

4

3 回答 3

0

改变：

//Initial setup for jQuery UI

$( '#infoImg' ).tooltip();
$( '#volSlider' ).slider({ max: 100, min: 0});

对此：

$( '.infoImg' ).tooltip();
$( '.volSlider' ).slider({ max: 100, min: 0});
于 2013-10-30T10:24:15.510 回答
0

在您的第一段代码中：您通过 id 选择处理程序的初始设置$('#infoImt')。在更新后，您使用类选择器$('.infoImg')。您指的不是同一个对象。这就是为什么它不起作用。

请注意：确保任何现有元素首先放弃其功能，然后再添加更新。

编辑

尝试以下功能：

var initFn = function(){
    $('.infoImg.__new')
    .tooltip()
    .removeClass('__new');

    $('.volSlider.__new')
    .slider({max:100,min:0})
    .removeClass('__new');
};

如您所见，我添加了一个类：__new. 此类是“实际”选择器。这将确保您不会在同一元素上应用两次.tooltip()。.slider()您还必须稍微更改一下 HTML：

<img class="infoImg __new" src="images/info_s.png" height="30" width="30" title="What" />
<div class="volSlider __new ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" aria-disabled="false">
    <a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 18%;"></a>
</div>

请注意，我已更改id为class并添加了__new该类。让我知道这个是否奏效。

于 2013-10-30T09:40:29.673 回答
0

我在each()函数的帮助下做到了：

$.each($('.volSlider'), function() {
        $(this).slider({ max: 100, min: 0});
                });
于 2013-10-30T10:39:33.133 回答