拾色器插件实验（错误的值更新）

Question

小提琴：http://jsbin.com/dizifedewoce/1/edit

NOTE：在此之前，我只做过简单/基本的插件，几乎没有功能。这是我第一个可用的插件，或者至少是目标。

一张图片值得一千个单词...（还提供Fiddle）

<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS9Ra1gyUy5wbmcifQ==” alt =“在此处输入图像说明”>“ >>

插件使用示例...

$(document).ready(function() {
  $(".picker").bind('load focus blur change', function() {
    $("body").css({
      "background-color": $(this).val()
    });
  }).HSLAColorPicker(".place-picker");

  $(".picker2").bind('load focus blur change').HSLAColorPicker(".place-picker2");
});
我的问题是，当我为第一个选择器调整滑块时，它正在更新第二个/最后一个值，而不是指定的选择器为$(".picker")。我一直在尝试解决此问题，似乎无法弄清楚哪里出了问题。

这里是插件。

(function($) {
  $.fn.HSLAColorPicker = function(container) {
    $this = $(this);
    container = $(container).get(0);
    $(container).addClass("hsla-cpick-container").html('<table class="cpick"> <tr> <td><div class="colorwheel"><input class="colorpick-hue" value="328" min="0" max="360" type="range"></div></td> </tr> <tr> <td><div class="colorpick-s-bg"><input class="colorpick-s" min="0" max="100" value="100" type="range"></div></td> </tr> <tr> <td><div class="colorpick-l-bg"><input class="colorpick-l" min="0" max="100" value="44" type="range"></div></td> </tr> <tr> <td><div class="colorpick-a-bg"><input class="colorpick-a" step=".01" min="0" max="1" value="1" type="range"></div></td> </tr> </table>');

    var ApplyHSLACodeNPrev = function() {
      if ( $(container).children().find(".colorpick-a").val() === "1" ) {
        $this.val( "hsl(" + $(container).children().find(".colorpick-hue").val() + ", " + $(container).children().find(".colorpick-s").val() + "%, " + $(container).children().find(".colorpick-l").val() + "%)").change();
      } else {
        $this.val( "hsla(" + $(container).children().find(".colorpick-hue").val() + ", " + $(container).children().find(".colorpick-s").val() + "%, " + $(container).children().find(".colorpick-l").val() + "%, " + $(container).children().find(".colorpick-a").val() + ")").change();
      }
      if ( $(container).children().find(".colorpick-a").val() === "0" ) {
        $this.val("transparent").change();
      }
      if ( $(container).children().find(".colorpick-l").val() > 50 ) {
        $this.css({
          "background-color": $this.val(),
          "color": "#000"
        });
      } else {
        $this.css({
          "background-color": $this.val(),
          "color": "#fff"
        });
      }

      // Alpha Saturation
      $(container).children().find(".colorpick-s-bg").css({
        "background": "linear-gradient(to right, #7f7f80 0%," + "hsl(" + $(".colorpick-hue").val() + "," + $(".colorpick-s").val() + "%," + $(".colorpick-l").val() + "%)" + " 100%)"
      });
      // Alpha Lightness
      $(container).children().find(".colorpick-l-bg").css({
        "background": "linear-gradient(to right, #000000 0%," + "hsl(" + $(".colorpick-hue").val() + "," + $(".colorpick-s").val() + "%,50%) 50%,#ffffff 100%)"
      });
      // Alpha Preview
      $(container).children().find(".colorpick-a-bg").css({
        "background": "linear-gradient(to right, rgba(255,255,255,0) 0%," + "hsl(" + $(".colorpick-hue").val() + "," + $(".colorpick-s").val() + "%," + $(".colorpick-l").val() + "%)" + " 100%)"
      });
    };

    $this.on('mousedown touchstart focus', function(e) {
      ApplyHSLACodeNPrev();
    });

    // Apply HSLA Code from Sliders
    $(container).children().find(".colorpick-hue, .colorpick-s, .colorpick-l, .colorpick-a").on('change', function() {
      ApplyHSLACodeNPrev();
    });
    ApplyHSLACodeNPrev();
  };
}) (jQuery) ;

提琴：http://jsbin.com/dizifedewoce/1/edit注意：在此之前，我仅制作了简单/基本的插件，几乎没有功能。这是我第一个可用的插件，或者至少是目标。 A ...

Answer 1

[对我来说，就像您忘记了var关键字，无意间使$this属性成为全局属性。尝试从此更改您的插件代码：