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 traversing documentation

编辑：根据Prody的回答更新（父母已更改为父母）

Answer 2

我不是百分百肯定，但我认为你所需要的是Phill Sacre的回答建议除了使用parents（注意最后的s）

来自jQuery API：

parent（String expr）返回jQuery 获取一组元素，其中包含匹配元素集的唯一父元素。

parents（String expr）返回jQuery 获取一组元素，其中包含匹配元素集的唯一祖先（根元素除外）。

Answer 3

现在因为在HTML中只有ID是唯一的，所以你可以直接引用div而不进行任何遍历：

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

    </div>
</div>

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

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


  });
</script>

请注意，虽然可以过滤CSS元素的父元素，但使用样式类dor行为是一个坏主意TM，你应该避免这样做。但如果你真的很绝望，你可以尝试一下：

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

Answer 4

.parent（）。css（此处更改）

Jquery改变父div的背景

4 个答案: