javascript - 使用短代码将脚本附加到 ID？

Question

我有这样的代码：

<div id="content">
 <div id="widget1"></div>
 <div id="widget89"></div>
 <div id="widget78"></div>
 ..............
 <div id="widget(anyIndex)"></div>
</div>

通过将内容添加到小部件（HTML/JS 小部件）中，我有：

<div id="content"
     <div id="widget1">
       <script type='text/javascript'>
                jQuery("#widget1").selectme({
                Numpost:4,
                Stylepost:"papa",
                });
    </script>
     </div>
     <div id="widget89">
       <script type='text/javascript'>
                jQuery("#widget89").selectme({
                Numpost:7,
                Stylepost:"popo",
                });
       </script>
     </div>

     ..............
     <div id="widget(anyIndex)">.....</div>
 </div>

它是如此手动和耗时。

现在，我想使用短代码而不是在每个 div 中重复太多 Javascript，例如：

<div id="content"
 <div id="widget1">[4][papa]</div>
 <div id="widget89">[7][popo]</div>
 ..............
 <div id="widget(anyIndex)">...</div>
</div>

JS：

<script>
(function (a) {
    a.selectme = function (c, b) {
        var d = this;
        d.init = function () {
        d.options = a.extend({}, a.selectme.defaultOptions, b);
      ...................something
        };
        d.init()
    };
    a.selectme.defaultOptions = {
        Numpost:4,
        Stylepost:"Enter your style",
    };
    a.fn.selectme = function (b) {
        return this.each(function () {
            (new a.selectme(this, b))
        })
    }
})(jQuery);

</script>

注意：Widget(anyindex) 是自动捕获的。例如：widget89 设置为当前，但我不知道该小部件的索引（索引 = 89），只要确定我正在向其中输入 Javascript/Jquery 代码即可。当我添加新的小部件时，我将有新的索引，例如：widget105 或 widget200 (anyindex)

我怎样才能做到这一点。谢谢你的帮助。

Answer 1

这是一种在标记中使用数据属性的方法和一个简单的each循环来初始化。data-为您需要在插件中指定的变量添加属性。

<div id="widget89" data-numpost="7" data-style="popo">
 alert( $('#widget89').data('numpost') );

要获取小部件的索引，首先创建它们的集合以用于索引：

用于$.each初始化整个集合将为您提供集合中小部件的索引（我不清楚您需要它做什么）：

$('[id^=widget]').each(function(idx){
   var $this=$(this), data=$this.data, INDEX=idx;
   $this.selectme({
       Numpost:data.numpost,
       Stylepost:data.style
   })
})

Answer 2

你可以使用一个函数

function setwidget(id,post,style)
{
  jQuery("#"+id).selectme({
                    Numpost:post,
                    Stylepost:style
                    });
}

现在打电话

 setwidget("widget1",4,"papa");
setwidget("widget89",7,"popo");