Issue on creating simple jQuery plugin

jquery plugin tutorial advanced
jquery plugin tutorial w3schools
jquery plugins
jquery plugins w3schools
how to use jquery plugin
jquery connect plugin
jquery plugins download
how to use jquery plugins in php

Can you please take a look at this demo and let me know why I am not able to set color of each div based on it's own attribute on 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>

You can use the 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>

Issue on creating simple jQuery plugin, You can use the JavaScript: HTMLElement.dataset: this.dataset.color. (function($​) { $.fn.helloplugin = function() { return this.each(function()  This tutorial will show you how to create a simple jQuery Plugin that allow user to change some settings. I'm using one of my jQuery tutorials - A Really Simple jQuery Plugin Tutorial

Consider the following code:

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

#27: Building a Simple jQuery Plugin, All comments are held for moderation. Be helpful and kind and yours will be published no problem. We have a. Code of Conduct. These user defined functions bundled together are known as jQuery plugin. Many times during developing a web project we need to create our own jQuery plugin. This tutorial will help you understand how to create a basic jQuery plugin with well known standards. Prerequisite. Before going to start creating the plugin we need to understand some topics.

Look at the following code.

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

How To Develop a jQuery Plugin, However, relatively few developers delve into the depths of plugin development. In this tutorial, we will create simple plugin to explain the basics. I'm having issues with sharing internal instance variables between my plugin's public methods. For example, I would like to be able to access $.MyPlugin.settings from the .init method. Here's the plugin code:

Simple jQuery Plugin Tutorial, A simple plugin constructor for logic related to the initial creation and a solution to this problem that helps you build complex, stateful plugins  In this article, we will see how to create a simple plug-in called Map Scroller that lets any overflowing HTML element to scroll like in Google Maps. Let's dive into the article :) Requirements. jQuery v1.4.2; jquery.DisableTextSelect.js; Tips in jQuery $ is the main object in jQuery. Everything in jQuery is based upon this, or uses this in

Essential jQuery Plugin Patterns, Create an HTML document with all the basic tags and calling the jQuery.js file. Developers think ahead and encapsulate the executable  Writing your own jQuery plugin isn’t as hard as it might seem at first. This tutorial will go through the process of writing a simple plugin, adding some options, and even perform a callback. Setting Up. We’ll start with the old chesnut of programming tutorials, a “Hello, World!” plugin.

How to Write Your Own jQuery Plugin, This article demonstrates the steps in creating a simple jQuery plug-in the need to directly deal with the dirty waters of browser compatibility issues. return this.​each(function(){ //disable text selection using the plugin jquery. I got it from jQuery Plugin Boilerplate. Also described in jQuery Plugin Boilerplate, reprise // jQuery Plugin Boilerplate // A boilerplate for jumpstarting jQuery plugins development // version 1.1, May 14th, 2011 // by Stefan Gabos // remember to change every instance of "pluginName" to the name of your plugin! (function($) { // here we go!

Comments
  • I think it's the logic of your .each() statement. color is set to red and then applied to each element.
  • That's right but I don't know how to fix it
  • Thanks Danny but what is dataset how it is holing the color?
  • The dataset property on the HTMLElement interface provides read/write access to all the custom data attributes (data-*) set on the element. By using this.dataset.color you are getting directly the data-color of your HTML element.
  • is this supported in all browsers?
  • It is supported by most browsers. IE 11.
  • I've updated my answer. You can replace this.dataset.color by $(this).data('color').
  • Thanks Twisty but I am not getting the var that = this can you please let me know what is this doing?
  • @Beheini this just helps create an alternate reference to ensure that this does not get confused.