Получение входных данных из того же элемента jquery - PullRequest
Новая
       39

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

0 голосов
/ 24 февраля 2012

Я действительно начинаю разбираться с 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();
}

Но в ответ я получаю ту же ошибку:

Синтаксическая ошибка,нераспознанное выражение: [объект объекта]

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

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

Ответы [ 3 ]

1 голос
/ 24 февраля 2012

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

$(document).ready( function() {
  $('.newsAutoInput').click(function() {
    $(this).next('.newsAutoSave').fadeIn();
  });
});
1 голос
/ 24 февраля 2012

Вы пытаетесь объединить объект со строкой.

objParent - это объект jQuery. Вы можете сделать это вместо:

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

Также обычной практикой является добавление префиксов к именам переменных $, если они являются объектами jQuery. Это облегчает вам запоминание того, что вы работаете с объектом jQuery вместо строки или обычного узла DOM.

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

function setAutoNews(obj){
   var $objParent = $(obj).parent();
   $objParent.find('.newsAutoSave').fadeIn();
}
0 голосов
/ 24 февраля 2012 
//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/

...