Question

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

Widget目前看起来像这样：

$.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进行比较，但我不知道如何。非常感谢任何建议，谢谢。

Answer 1

我可能不完全理解你的问题，但如果我是你，我会使用一个类而不是Id来选择多个元素。然后你可以使用jquery的每种方法，你可以做类似的事情：

$('.ui-hint').each(function(i, el) {
    var $myHint = $(el);
    console.log('index: ', i, ' jquery el: ', $myHint);
});

循环访问当前小部件实例

1 个答案: