Jquery改变父div的背景

Question

我在其中一个html页面中有以下代码段:

<div class="inputboximage">
    <div class="value2">
    <input name='address1'  value='Somewhere' type="text" size="26" maxlength="40" />
    <br />

    </div>
</div>

我的问题是,当我点击address1文本字段时,我需要更改inputboximage背景,并在失去焦点时恢复原始背景.

我使用了以下内容:

  <script>
  $(document).ready(function(){

    $("input").focus(function () {
         $(this.parentNode).css('background-image', 'url(images/curvedinputblue.gif)');
    });

    $("input").blur(function () {
    $(this.parentNode).css('background-image', 'url(images/curvedinput.gif)');
    });

  });
  </script>

但它没有替换图像,而是像您期望的那样向value2 div添加背景图像.在这种情况下,我可以使用parentNode.parentNode,但是inputboxImage节点也有可能在父树上进一步向上或向下.

有没有办法我可以更改这个代码,以便它将在父树下导航,直到找到一个名为inputboximage的div并替换那里的图像？

另外,如果我有两个不同的div类,inputboximage和inputboximageLarge,有没有办法修改这个函数,以便它可以同时使用它们,用每个不同的图像替换背景图像？

Answer 1

我觉得用

$(this).parents('div.inputBoxImage').css(...)

而不$(this.parentNode)应该工作.

请参阅jQuery 遍历文档

编辑:根据Prody的回答更新(父母已更改为父母)