Question

我试图创建一个插件（不是一个好的工作，但只是想学习），我在添加一个clic事件时遇到了麻烦。

这是插件：

(function($) {

    $.fn.selectMe = function() {

        return this.filter(".selectMe").each(function() {

            var sel = $(this);
            var listOpt = "";

            /* Hide the <select> tag and create a new element ".selectMe" */
            sel.css("display","none");
            var selName = sel.attr("name");
            sel.after("<div id='"+selName+"' class='selectMe'><div class='selLabel'><span></span><i class='fa fa-lg fa-angle-down pull-right'></i></div><div class='selOptions'></div></div>");

            /* Look for <option> of his parent and add them to the new element*/
            sel.find("option").each(function() {
                var optVal = $(this).val();
                var optText = $(this).text();
                /*listOpt += "{"+optVal+"} ";*/
                listOpt += "<li data-value='"+optVal+"'>"+optText+"</li>";
            });
            $("#"+selName+" .selOptions").html("<ul>"+listOpt+"</ul>");

        });

    };

}( jQuery ));

这是HTML代码：

<select class="selectMe" name="cars">
    <option value="1">Volvo</option>
    <option value="2">Saab</option>
    <option value="3">Fiat</option>
    <option value="4">Audi</option>
</select>
<select class="selectMe" name="options">
    <option value="1">Opt 1</option>
    <option value="2">Opt 2</option>
    <option value="3">Opt 3</option>
    <option value="4">Opt 4</option>
</select>

在jquery插件中，我必须编写事件以及如何编写？我怎样才能防止双重交互？

Answer 1

添加新列表后，可以使用find('li').click(fn)

$("#"+selName+" .selOptions")
       .html("<ul>"+listOpt+"</ul>") /// your code ends here
       .find('li')
       .click(function(){
             var $li = $(this).addClass('selected');
             $li.siblings().removeClass('selected');
             sel.val( $li.data('value') ); // set value of select
        });

我建议你为你的ID使用某种前缀，以避免与页面中的其他项目发生冲突。

此外，您不应该使用filter(".selectMe")，因为您可能会使用以下方式调用插件：

$(".selectMe").selectMe()

自定义插件上的点击功能有问题

1 个答案: