使用 append 在 jQuery 插件中创建叠加层

Question

我正在尝试制作一个小型 jQuery 插件，该插件能够创建叠加层以创建着色效果。使用纯 js 和 jQuery 创建此叠加层非常简单，但是当我尝试将其全部包装到 jQuery 插件中时，我收到错误消息，指出 append（和 appendTo）不是函数。如果我使用扩展而不是追加，插件可以工作，但它只是更改现有的 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）：

(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"});
    });

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

<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>

使用 append 在 jQuery 插件中创建叠加层

Using append to create an overlay in a jQuery plugin

javascript

jquery

append

jquery-plugins