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

但作为回报我一直得到同样的错误：

语法错误，无法识别的表达式：[object Object]

有人能够告诉我如何在聚焦文本输入时淡入输入按钮吗？我想我在这里缺少一个基本但不能指责它。

谢谢，约翰

Answer 1

您正在尝试使用字符串连接对象。

objParent是一个jQuery对象。你可以这样做：

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

如果变量名是jQuery对象，那么在变量名前加一个$也是一种常见的做法。这使您更容易记住您正在使用jQuery对象而不是字符串或常规DOM节点。

您可以将代码更改为以下内容：

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

Answer 2

我可能会采用不同的方法，而不是创建函数：

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

Answer 3

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

从同一元素jquery中获取输入

3 个答案: