同じ要素内から入力を取得するjquery

Question

私は実際にjQueryを手に入れようとしていますが、小さな問題に取り組んでいます。

同じ親に座ってテキスト入力に焦点を当てたとき、私はフェードインに入力タイプのボタンを必要とする：

<span class="newsFeedMaxAutoLoad"> 
    <span title="This is number of news ite...."> 
     auto display: 
    </span> 
    <input type="text" onfocus="setAutoNews(this);" value="10" maxlength="99" class="newsAutoInput"> 
    <input type="button" value="save" class="button green small newsAutoSave"><!-- this is hidden by default by its class 'newsAutoSave'--> 
</span> 

jQueryの私はこれを達成しようとしています：

function setAutoNews(obj){ 
    var objParent = $(obj).parent(); 
    $(objParent + ' .newsAutoSave').fadeIn(); 
} 

しかしリターンでの私は同じエラーが発生し続ける：

Syntax error, unrecognized expression: [object Object]

私はどのように私はfadeIn tを教えることができるだろうか彼はテキスト入力に焦点を合わせるときにボタンを入力しましたか？私はここに根本的な欠如があると思うが、私の指を置くことはできない。

おかげで、 ジョン

Answer 1

//find the elements we want to bind to for the focus event 
$('.newsFeedMaxAutoLoad').children('.newsAutoInput').on('focus', function() { 

    //select the next element which is the button, 
    //we could also use `.siblings('.newsAutoSave')` instead of `.next()` if the button may not always be the exact next sibling element 
    $(this).next().fadeIn(250); 
}); 

これは、インラインJSを使用して回避コードをもっと簡単に保つことができます。だからあなたのHTMLは次のようになります。ここでは

<span class="newsFeedMaxAutoLoad"> 
    <span title="This is number of news ite...."> 
     auto display: 
    </span> 
    <input type="text" value="10" maxlength="99" class="newsAutoInput"> 
    <input type="button" value="save" class="button green small newsAutoSave"><!-- this is hidden by default by its class 'newsAutoSave'--> 
</span> 

はデモです：http://jsfiddle.net/ZzHx3/

Answer 2

あなたは、文字列でオブジェクトを連結しようとしています。

objParentはjQueryオブジェクトです。あなたは代わりにこれを行うことができます：

objParent.find('.newsAutoSave').fadeIn();

はまた、それはやや彼らはjQueryのオブジェクトである場合$を使用して変数名の前に付けるのが一般的です。これにより、文字列または通常のDOMノードの代わりにjQueryオブジェクトを使用していることを覚えやすくなります。

あなたは、次のようにコードを変更することができます：

function setAutoNews(obj){ 
    var $objParent = $(obj).parent(); 
    $objParent.find('.newsAutoSave').fadeIn(); 
} 

Answer 3

私はおそらく別のアプローチを取ると、全く機能を作成しないでしょう。

$(document).ready(function() { 
    $('.newsAutoInput').click(function() { 
    $(this).next('.newsAutoSave').fadeIn(); 
    }); 
});