追加を使用してjQueryプラグインでオーバーレイを作成する

Question

オーバーレイを作成して色合い効果を作成できる小さなjQueryプラグインを作成しようとしています。このオーバーレイを作成するには、プレーンjs & jQueryを使用するだけで十分ですが、jQueryプラグインにすべてをラップしようとすると、append（およびappendTo）というエラーメッセージが表示されます。プラグインは、appendの代わりにextendを使用すると機能しますが、既存のCSSコードを変更するだけですが、divやobjectに実際のオーバーレイを作成する必要があります。

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