jQuery - colorpicker each() and $(this)

stinkysGTI

I'm using the color picker from http://www.eyecon.ro/colorpicker/ and it works great, but I need multiple color inputs on a page, but initializing each one would be crazy. So I wrapped the initialization code in an each() accompanied by this. I'm trying to change the background color and value onchange. It works fine when I target it using an id or class, but when replaced with this, lines 12 and 13 of my fiddle don't work. The initial this works on targeting each input though.

Why is this happening? (or not rather)

jsfiddle: jsfiddle

adeneo

It's not really clear from the documentation, but the colorPicker stores a reference to the element it's called on in jQuery's data, and you can access it like this.

$('.color-picker').ColorPicker({
    onShow: function (colpkr) {
        $(colpkr).fadeIn(500);
        return false;
    },
    onHide: function (colpkr) {
        $(colpkr).fadeOut(500);
        return false;
    },
    onChange: function (hsb, hex, rgb) {
        var el = $(this).data('colorpicker').el;
        $(el).css('backgroundColor', '#' + hex).val('#' + hex);
    }
});

Note that you don't need an each loop at all, the plugin is initialized on all elements matching the selector

The reason it doesn't work with this is because the plugin sets this to the colorPicker, i.e. the box that pops up, not the input.

FIDDLE

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

jQuery从$ .each到for循环

분류에서Dev

jQuery each nextAll prevAll

분류에서Dev

jQuery .each deep selecting

분류에서Dev

JQuery Commands Breaking Each Other

분류에서Dev

.each ()의 jQuery 역순

분류에서Dev

JQuery .each () 대체 (for..in)

분류에서Dev

Create elements with jQuery each not working

분류에서Dev

Please explain .each loop in Jquery

분류에서Dev

jquery .each() combing all values on each run through

분류에서Dev

jquery $.each nested in another $each. getting data from a JSON

분류에서Dev

jQuery each run function on every other element

분류에서Dev

jQuery each() seems stopping after the ninth element

분류에서Dev

Can not use .next() from $this in jquery each function

분류에서Dev

$ .each Jquery 작동하지만

분류에서Dev

jQuery .get, .each, .css 함수

분류에서Dev

why use each when creating a jquery plugin

분류에서Dev

jQuery each function not firing with MVC Razor syntax

분류에서Dev

jQuery.each does not seem to work

분류에서Dev

each() jquery issue adding value multiple times

분류에서Dev

jQuery의 무한 each () 루프?

분류에서Dev

JQuery-$ .each에서 탈출

분류에서Dev

$ .When에 중첩 된 jQuery $ .each

분류에서Dev

jQuery: each function iteration for a table selector

분류에서Dev

jquery for loop instead of underscore.js _.each

분류에서Dev

jQuery - how to perform 'each' function on selected elements?

분류에서Dev

Trying to get total costs in each row jQuery

분류에서Dev

jQuery: using ".each" for a select's options by $(this)

분류에서Dev

jQuery each running multiple times on same element

분류에서Dev

displaying jquery tooltip for each record in custom content