如何为jQuery插件的对象文字添加高级样式选项

时间:2019-04-03 02:13:46

标签: javascript jquery object plugins

我正在构建一个jQuery插件,并试图通过接受选项来对其进行自定义...

***我正在澄清我的问题...

以下是jQuery待办事项清单插件。我希望每个动态创建的列表项在对象文字中接收默认属性。但是,我似乎无法使它正常工作。这是我到目前为止所拥有的。有什么建议吗?谢谢!

HTML
   <div id='to-do-container'>
     <h1>My To-Do List</h1>
     <input type="text" placeholder="New item" />
     <button id="add">Add</button>
   </div>

   <ul id="mylist"></ul>

   <script>
     $(document).ready(function() {
       $("li").newPost();
     });
   </script>

jQuery

(function ( $ ) {
  $.fn.newPost = function( options ) {

    $(function() {
      $("#add").on("click", function() {
        var val = $("input").val();
        if(val !== '') {
         var elem = $("<li></li>").text(val);
         $(elem).append("<button class='rem'>X</button>");
         $("#mylist").append(elem);
         $("input").val("");
         $(".rem").on("click", function() {
          $(this).parent().remove();
         });
        }
      });
    });

   var settings = $.extend({
       color: "red",
       background: "yellow"
   }, options );

   return this.css({
       color: settings.color,
       background: settings.background
   });
  };
}( jQuery ));

0 个答案:

没有答案