0

我目前正在使用 UI 小部件工厂编写自己的提示小部件。对于我的 turnOn 和 turnOff 方法，我希望打开或关闭所有提示，或者如果我将一组提示 id 传递给此方法，它们将仅打开或关闭那些具有 id 的提示。

小部件现在看起来像这样：

$.widget("ui.hint", {
   options: {
      id: '1',
      text: 'This is a hint',
      position: 'top',
      offset: '0%',
      hide: { effect: "explode", duration: 1000 }
},
 _create: function() {
    var o = this.options, 
        el = this.element,
        shell =  $('<div></div>').addClass('ui-hint ui-hint-     '+o.position).text(o.text).css({
        position: 'absolute',
        minHeight: 100,
        minWidth: 100,
        background: 'rgb(250, 255, 189)',
        zIndex: 9999
        });


    el.addClass('ui-hint-target');

    this._trigger('beforeShow', null, shell) //added event before placing into dom

    shell.insertAfter(el); 

    switch (o.position) {
        case 'top':
            shell.position({
                "my": "center bottom",
                "at": "center top",
                "of": el,
                "offset": o.offset+" -25%",
                "collision": 'none none'
            });
            break;
        case 'bottom':
            shell.position({
                "my": "center top",
                "at": "center bottom",
                "of": el,
                "offset": o.offset+" 25%",
                "collision": 'none none'
            });
            break;
        case 'left':
            shell.position({
                "my": "right center",
                "at": "left center",
                "of": el,
                "offset": "-25% "+o.offset,
                "collision": 'none none'
            });
            break;
        case 'right':
            shell.position({
                "my": "left center",
                "at": "right center",
                "of": el,
                "offset": "25% "+o.offset,
                "collision": 'none none'
            });
            break;      
    }



},
_setOption: function(key, value) {
    if (value !== undefined) {
      this.options[key] = value;
      this._render();
     return this;
}
    else {
    return this.options[key];
   }
},
hide: function() {    
    this.element.next().hide("fast"); 
    this._trigger('afterHide', null, this.element.next()); 
}, 
show: function() {
    this._trigger('beforeShow', null, this.element.next());
    this.element.next().show("fast"); 
},
    hint: function() {
  return this.element.next();
}

});

我的问题是，我该如何组织这些方法？我想我应该遍历小部件的每个实例并将值与它们的 id 进行比较，但我不知道如何。将不胜感激任何建议，在此先感谢。

4

1 回答 1

1

我可能没有完全理解你的问题，但如果我是你，我会使用一个类而不是 Id 来选择多个元素。然后您可以使用 jquery 的 each 方法，您可以执行以下操作：

$('.ui-hint').each(function(i, el) {
    var $myHint = $(el);
    console.log('index: ', i, ' jquery el: ', $myHint);
});
于 2013-10-09T09:19:48.353 回答