0

我想创建一个 jquery 插件并将其用于我页面中的一些 HTML 元素。这是我的 HTML 代码：

<select class="test">
    <option>
        111
    </option>
    <option>
        222
    </option>
    <option>
        333
    </option>
</select>
<select class="test">
    <option>
        444
    </option>
    <option>
        555
    </option>
</select>

我想将我的插件用于select元素。这是我的插件示例：

(function ( $ ) {
        $.fn.testplug = function() {
            var res = "";
            this.children("option").each(function(){
                res+=$(this).text()+"#";
            });
            alert(res);
        };
    }( jQuery ));

并使用它：

$(".test").testplug();

现在我有两个res值，一个应该是111#222#333#，另一个应该是444#555#，但我有一个结果，它是111#222#333#444#555#。我应该怎么做才能得到我想要的结果？ 链接到 jsfiddle

4

2 回答 2

1

您正在选择两者，因此您必须指定要使用哪一个

$('.test:first').testplug() //111#222#333

和

$('.test:last').testplug() //444#555#

或者

$('select').on('change',function(){
    $(this).testplug();
});

或者您可以像这样遍历每个 .test

$('.test').each(function(){
$(this).testplug();
});

您还可以像这样重写代码，循环遍历列表，然后是子列表，并在每个列表的末尾发出警报

 (function ( $ ) {
        $.fn.testplug = function() {
            this.each(function(){
                  var res = "";
                $(this).children('option').each(function(){
                          res+=$(this).text()+"#";
                });
                 alert(res);
            });
        };
    }( jQuery ));

演示

于 2013-10-01T08:38:08.637 回答
1

你的意思是一个叫做插件功能的2个警报？

   $.fn.testplug = function() {
        $(this).each(function(){
           var res = "";
           $(this).children("option").each(function(){
              res+=$(this).text()+"#";
           });
           alert(res);
        });
    };
于 2013-10-01T08:44:41.113 回答