.attr() 作为属性选择器中的变量不起作用

Question

我有这样的代码

<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);
}

我想做的是当 <input> 或 <textarea> 聚焦时，显示消息 div 和 .message class。

我把$(this).attr('id')做成一个变量（比如post-title），用.find('div[for-field="'+forwhom+'"]')找。这不起作用。

但是如果我将 var forwhom 从 $(this).attr('id')（jQ 选择器）替换为像 post-title 这样的绝对值，它确实有效。

奇怪！根据 jQuery 文档，.attr() 方法 returns 是一个字符串而不是对象。

有什么问题？

Answer 1

Div 属性 for-field="post-title" 和 input 有 post-titie 有 spelling mistake.

post-title 和 post-titie 不相同，这就是为什么您的代码找不到具有 for 属性的 div 的原因。

Answer 2

我正在获取 id 属性。检查控制台错误：

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

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

    console.log(forwhom);
});

});

这是工作 fiddle https://jsfiddle.net/sesn/x1ju006b/1/

Answer 3

一些提示：

1) 使用 chrome 开发工具在控制台中测试您的选择器

2) 使用 .prop() 而不是 .attr()

3) .closest() 而不是 $(this).parents().eq(2)

.attr() 作为属性选择器中的变量不起作用

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

html

javascript

jquery

jquery-selectors