Question

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

注意：我之前只制作了简单/基本的插件，几乎没有功能。这是我第一个可用的插件，或者至少是目标。

一张图片胜过千言万语......（Fiddle也提供了）

enter image description here

插件使用示例...

$(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) ;

Answer 1

在我看来，您忘记了var关键字，无意中将$this属性设为全局。尝试更改您的插件代码：

(function($) {
  $.fn.HSLAColorPicker = function(container) {
    $this = $(this);

到此：

(function($) {
  $.fn.HSLAColorPicker = function(container) {
    var $this = $(this);

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

1 个答案: