[public] jQuery.each issue
HTML
<link rel="stylesheet" href="http:////netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/foundation/5.2.2/css/foundation.min.css">
<h1>jQuery.each issue</h1>
<div class="row">
<div class="medium-6 columns">
<div class="label" data-informer-id="p1"> <i class="fa fa-circle"></i> 1st</div>
<textarea data-placeholder="First paragraph<br>Type here something." data-informer-link="p1"></textarea>
</div>
<div class="medium-6 columns">
<div class="label" data-informer-id="p2"> <i class="fa fa-circle"></i> 2nd</div>
<textarea data-placeholder="Second paragraph<br>Finish here." data-informer-link="p2"></textarea>
</div>
</div
JavaScript
$('textarea[data-placeholder]').each(function () {
var $this = $(this);
var $placeholder = $this.attr('data-placeholder');
$placeholder = $placeholder.replace(/\<br>/g, "\n");
var $informer_id = $this.attr('data-informer-link');
console.log('each: ' + $informer_id + ', placeholder: ' + $placeholder);
$this.attr('value', $placeholder);
$this.focus(function () {
if ($this.val() == $placeholder) {
$this.attr('value', '');
}
});
$this.blur(function () {
if ($this.val() == '') {
$this.attr('value', $placeholder);
console.log('each brur placeholder: ' + $informer_id);
$('[data-informer-id=' + $informer_id + '] i.fa')
.addClass('fa-circle')
.removeClass('fa-check-circle');
} else {
console.log('each brur value: ' + $informer_id);
$('[data-informer-id=' + $informer_id + '] i.fa')
.removeClass('fa-circle')
.addClass('fa-check-circle');
}
});
// remove the focus, if it is on by default
$this.blur();
$('[data-informer-id=' + $informer_id + '] i.fa')
.addClass('fa-circle')
.removeClass('fa-check-circle');
});