javascript - jQuery 颜色选择器插件实验

Question

Color Picker Fiddle - http://jsbin.com/panajiforuza/1/edit

Fiddle(试图变成一个插件)- http://jsbin.com/reyewefovepe/1/edit

我制作了一个基本的 HSLA 拾色器，我正在尝试将其转换为一个插件。

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

我想在它选择的任何输入 [type=text] 上使用它，并保留它以前的值(为每个新输入附加一个颜色选择器，并让插件为它完成颜色选择器的所有工作选择器)

我的问题是，当我调整 slider 时，我将其设置为 $(this)(定义用户选择器)。但是它的值没有改变，我不明白为什么。

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

    var FontColorPick = function() {
      if ( $(".colorpick-a-text").val() === "1" ) {
        $(this).val( "hsl(" + $(".colorpick-hue").val() + ", " + $(".colorpick-s").val() + "%, " + $(".colorpick-l").val() + "%)");
      } else {
        $(this).val( "hsla(" + $(".colorpick-hue").val() + ", " + $(".colorpick-s").val() + "%, " + $(".colorpick-l").val() + "%, " + $(".colorpick-a").val() + ")");
      }
      if ( $(".colorpick-a-text").val() === "0" ) {
        $(this).val("transparent");
      }

      // Alpha Saturation
      $(".colorpick-s-bg").css({
        "background": "linear-gradient(to right, #7f7f80 0%," + "hsl(" + $(".colorpick-hue").val() + "," + $(".colorpick-s").val() + "%," + $(".colorpick-l").val() + "%)" + " 100%)"
      });
      // Alpha Lightness
      $(".colorpick-l-bg").css({
        "background": "linear-gradient(to right, #000000 0%," + "hsl(" + $(".colorpick-hue").val() + "," + $(".colorpick-s").val() + "%,50%) 50%,#ffffff 100%)"
      });
      // Alpha Preview
      $(".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) {
      $(".hsla-cpick-container").show().css({
        'position': 'absolute',
        'margin-top': "-" + $(this).offset().top,
        'left': $(this).offset().left,
        'width': $(this).width()
      });
      FontColorPick();
    });

    $(document).on('mousedown touchstart', function(e) {
      if ($(".hsla-cpick-container").is(":visible")) {
        if (!$(e.target).hasClass('keepcpickabove')) {
          $(".hsla-cpick-container").hide();
        }
      }
    });

    // Setup Hue
    $(".colorpick-hue").on('change', function() {
      FontColorPick();
    });
    // Setup Saturation
    $(".colorpick-s").on('change', function() {
      FontColorPick();
    });
    // Setup Lightness
    $(".colorpick-l").on('change', function() {
      FontColorPick();
    });
    // Setup Alpha
    $(".colorpick-a").on('change', function() {
      FontColorPick();
    });
    FontColorPick();
  };
}) (jQuery) ;

Answer 1

注意，将选择器、对象等缓存到变量可能有助于在 piece 中收集 $(this) 的值，如果/何时使用。立即呈现输入 value 而不是 placeholder ；输入元素立即获得 焦点。

尝试

html

  <div align="center">
  <label>bgcolor: </label><input class="bgcolor" placeholder="bgcolor" type="text" />
  <label>bgfontcolor: </label><input class="bgfontcolor" placeholder="bgfontcolor" type="text" />
  </div>

js

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

    var FontColorPick = function() {
      if ( $(".colorpick-a-text").val() === "1" ) {
        // substituted `that` for `$(this)`
        that.val( "hsl(" + $(".colorpick-hue").val() + ", " + $(".colorpick-s").val() + "%, " + $(".colorpick-l").val() + "%)");
      } else {
        // substituted `that` for `$(this)`
        that.val( "hsla(" + $(".colorpick-hue").val() + ", " + $(".colorpick-s").val() + "%, " + $(".colorpick-l").val() + "%, " + $(".colorpick-a").val() + ")");
      }
      if ( $(".colorpick-a-text").val() === "0" ) {
        // substituted `that` for `$(this)`
        that.val("transparent");
      }

      // Alpha Saturation
      $(".colorpick-s-bg").css({
        "background": "linear-gradient(to right, #7f7f80 0%," + "hsl(" + $(".colorpick-hue").val() + "," + $(".colorpick-s").val() + "%," + $(".colorpick-l").val() + "%)" + " 100%)"
      });
      // Alpha Lightness
      $(".colorpick-l-bg").css({
        "background": "linear-gradient(to right, #000000 0%," + "hsl(" + $(".colorpick-hue").val() + "," + $(".colorpick-s").val() + "%,50%) 50%,#ffffff 100%)"
      });
      // Alpha Preview
      $(".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%)"
      });
    };

    that.on('mousedown touchstart focus', function(e) {
      $(".hsla-cpick-container").show().css({
        'position': 'absolute',
        'margin-top': "-" + that.offset().top,
        'left': that.offset().left,
        'width': that.width()
      });
      FontColorPick();
    });

    $(document).on('mousedown touchstart', function(e) {
      if ($(".hsla-cpick-container").is(":visible")) {
        if (!$(e.target).hasClass('keepcpickabove')) {
          $(".hsla-cpick-container").hide();
        }
      }
    });

    // Setup Hue
    $(".colorpick-hue").on('change', function() {
      FontColorPick();
    });
    // Setup Saturation
    $(".colorpick-s").on('change', function() {
      FontColorPick();
    });
    // Setup Lightness
    $(".colorpick-l").on('change', function() {
      FontColorPick();
    });
    // Setup Alpha
    $(".colorpick-a").on('change', function() {
      FontColorPick();
    });
    FontColorPick();
  };
}) (jQuery) ;

$(document).ready(function() {
    // combined selectors `".bgcolor, .bgfontcolor"` ,
    // substituted `focus` event , `.focus()` ,
    // for direct call to `.HSLAColorPicker()` 
    $(".bgcolor, .bgfontcolor").on("focus", function(e) {
        $(this).HSLAColorPicker();
    }).focus();
  // $(".bgfontcolor").HSLAColorPicker();
});

jsfiddle http://jsfiddle.net/guest271314/2Lxnzynx/