Benyi Benyi - 5 months ago 11
HTML Question

.attr() as a variable in attribute selector not work

I have code like this



<div class="field">
<label>Title</label>
<input id="post-titie" type="text">
</div>
<div class="ui olive message" for-field="post-title" hidden>
<div class="header">About Title</div>
<ul class="list">
<li>Visitors can see your title even if they're not logged in.</li>
<li>The title is public.</li>
</ul>
</div>




$('.form textarea, :input').focus(function(){

var forwhom = $(this).attr('id'); /* not working */
/* var forwhom = 'post-title'; works */

var _msg = $(this).parents().eq(2).find('div[for-field="'+forwhom+'"]');
$(_msg).transition('fade down').transition('show');

console.log(forwhom);
console.log(_msg);
}


What I want to do is when
<input>
or
<textarea>
focused, show messages div with
.message
class.

I make
$(this).attr('id')
as a variable (eg.
post-title
), and find it with
.find('div[for-field="'+forwhom+'"]')
. This is not working.

But If I replace
var forwhom
from
$(this).attr('id')
(jQ selector) to a absolute value like
post-title
, It does work.

It's strange! According to jQuery documentation, the
.attr()
method returns a string not an object.

What is the problem?

Answer

Div attribute for-field="post-title" and input has post-titie there is spelling mistake.

post-title and post-titie are not same that's why your code is not finding the div with for attribute.