有关创建简单jQuery插件的问题

Question

能否请您看一下这个演示，让我知道为什么我无法基于div上的每个属性来设置每个data-color的颜色。

(function($) {
  $.fn.helloplugin = function() {
    let color = this.data('color');
    return this.each(function() {
      $(this).html('<h2>Hello jQuery</h2>').css('color', color);
    });
  }
}(jQuery));

$('.helloplugin').helloplugin();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="helloplugin" data-color="red"></div>
<div class="helloplugin" data-color="blue"></div>
<div class="helloplugin" data-color="green"></div>

Answer 1

您可以使用JavaScript： HTMLElement.dataset ：

this.dataset.color

(function($) {
  $.fn.helloplugin = function() {
    return this.each(function() {
      $(this).html('<h2>Hello jQuery</h2>').css('color', this.dataset.color);
    });
  }
}(jQuery));

$('.helloplugin').helloplugin();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="helloplugin" data-color="red"></div>
<div class="helloplugin" data-color="blue"></div>
<div class="helloplugin" data-color="green"></div>

您可以使用 Element.getAttribute() ：全面的浏览器支持：

this.getAttribute('data-color')

(function($) {
  $.fn.helloplugin = function() {
    return this.each(function() {
      $(this).html('<h2>Hello jQuery</h2>').css('color', this.getAttribute('data-color'));
    });
  }
}(jQuery));

$('.helloplugin').helloplugin();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="helloplugin" data-color="red"></div>
<div class="helloplugin" data-color="blue"></div>
<div class="helloplugin" data-color="green"></div>

完整的jQuery版本：

$(this).data('color')

(function($) {
  $.fn.helloplugin = function() {
    return this.each(function() {
      $(this).html('<h2>Hello jQuery</h2>').css('color', $(this).data('color'));
    });
  }
}(jQuery));

$('.helloplugin').helloplugin();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="helloplugin" data-color="red"></div>
<div class="helloplugin" data-color="blue"></div>
<div class="helloplugin" data-color="green"></div>

Answer 2

考虑以下代码：

(function($) {
  $.fn.helloplugin = function() {
    var that = this;
    that.each(function() {
      $(this).html('<h2>Hello jQuery</h2>').css('color', $(this).data("color"));
    });
  }
}(jQuery));

$('.helloplugin').helloplugin();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="helloplugin" data-color="red"></div>
<div class="helloplugin" data-color="blue"></div>
<div class="helloplugin" data-color="green"></div>

您必须循环遍历所有元素，收集循环内的颜色，然后将其应用于该元素。您的示例是先收集颜色，然后遍历元素。

希望有帮助。

Answer 3

看下面的代码。

(function($) {
  $.fn.helloplugin = function() {
    this.each(function(e) {
      let color = $(this).data('color');
      $(this).html('<h2>Hello jQuery</h2>').css('color', color);
    });
  }
}(jQuery));

$('.helloplugin').helloplugin();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="helloplugin" data-color="red"></div>
<div class="helloplugin" data-color="blue"></div>
<div class="helloplugin" data-color="green"></div>