Question

我正在尝试制作一个能够创建叠加层以创建着色效果的小型jQuery插件。使用普通的js＆amp; amp;来创建这个叠加很简单。 jQuery，但是当我尝试将它全部包装到jQuery插件中时，我得到了追加（和appendTo）不是函数的错误消息。如果我使用extend而不是append，插件可以工作，但它只是改变现有的css代码，而我想在任何div或对象上创建一个实际的叠加。

(function ($) {

  $.fn.tint = function( options )
    {
      var overlay = $.append(
        {
          backgroundColor: "black",
          opacity: 0.5,
          width: "100%",
          height: "100%",
          position: "absolute",
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
          //"z-index": 1000,
        }, options
      );
      return this.css(
        {
          backgroundColor: overlay.backgroundColor,
          opacity: overlay.opacity,
          width: overlay.width,
          height: overlay.height,
          position: overlay.position,
          top: overlay.top,
          left: overlay.left,
          right: overlay.right,
          bottom: overlay.bottom,
          //z-index: overlay.z-index,
        }
      );
    }
} ( jQuery ));

Answer 1

我想您正在尝试$.extend（不是$.append）：

＆＃13;

(function ($) {
        $.fn.tint = function( options )
        {
  
          if($(this).find(".overlay").length > 0) return $(this);

          var overlay = $.extend({
              backgroundColor: "black",
              opacity: 0.5,
              width: "100%",
              height: "100%",
              position: "absolute",
              top: 0,
              left: 0,
              right: 0,
              bottom: 0,
              //"z-index": 1000,
            }, options);
    
          $("<div class='overlay'>").css(
            {
              backgroundColor: overlay.backgroundColor,
              opacity: overlay.opacity,
              width: overlay.width,
              height: overlay.height,
              position: overlay.position,
              top: overlay.top,
              left: overlay.left,
              right: overlay.right,
              bottom: overlay.bottom,
              //z-index: overlay.z-index,
            }
          ).appendTo(this);
          return $(this);
        }
    } ( jQuery ));
    
    $(".overlay-target").on("click", function(){
        $(this).tint({backgroundColor: "green"});
    });

＆＃13;

.overlay-target {
   border: 1px solid red;
   margin: 20px;
   padding: 50px;
   position: relative;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='overlay-target'>I want an overlay</div>

＆＃13;

使用append在jQuery插件

1 个答案: