Получение ввода из одного элемента jquery

Question

Я действительно начинаю разбираться с jQuery, однако я все время зацикливаюсь на небольшой проблеме.

мне нужно FadeIn кнопку ввода типа, когда фокусирование на ввод текста, сидя в том же родителю:

<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]

Кто-нибудь сможет рассказать мне, как я могу исчезать он вводит кнопку при фокусировке на ввод текста? Я думаю, что мне не хватает фундаментальной информации, но я не могу на нее наложить.

Спасибо, Джон

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. Это облегчает вам запоминание того, что вы работаете с объектом jQuery вместо строки или обычного узла DOM.

Вы можете изменить свой код на следующее:

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

Answer 3

я бы, вероятно, использовать другой подход, а не создавать функцию на всех:

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