代码之家 › 专栏 › 技术社区 › Jimoc

Jquery更改父div的背景

html jquery

Jimoc · 技术社区 · 17 年前

我的一个html页面中有以下代码片段:

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

    </div>
</div>

我的问题是我需要 inputboximage background 当我点击时进行更改 address1 文本字段,并在失去焦点时恢复到原始状态。

我使用了以下方法:

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

但是,它并没有替换图像,而是像您所期望的那样,在value2div中添加了一个背景图像。我可以用 parentNode.parentNode 在这种情况下,但也有可能 inputboxImage 节点可以位于父树的更上或更低位置。

有没有一种方法可以更改此代码,使其在父树中向下导航,直到找到一个名为的div inputboximage 并替换那里的图像?

此外,如果我有两个不同的div类, 输入框图像 和 inputboximageLarge ,有没有一种方法可以修改此函数,使其同时适用于这两个函数,用每个函数的不同图像替换背景图像?

4 回复 | 直到 6 年前

oglester 16 年前

我认为使用

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

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

查看jQuery traversing documentation

编辑:根据Prody的回答进行更新(将父级更改为父级)

Prody 17 年前

我不是100%确定,但我认为你需要的是Phill Sacre的答案所建议的,除了使用 parents (注意最后的s)

来自jQuery API:

parent(String expr)返回jQuery 获取一组元素,其中包含匹配元素集的唯一父元素。

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

Tamas Czinege 17 年前

现在,由于在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分类的父元素,但使用样式类或行为是一个坏主意,你应该避免这样做。但如果你真的很绝望,你可以试试:

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

adardesign 17 年前

.parent().css(此处更改)

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Dr.0000FF · jQuery按钮点击不显示/隐藏内容

1 年前

user28928120 · 如何在jquery中选择所有类?

1 年前

LauraNMS · 如何使用Waypoints js实现粘性元素和偏移量

1 年前

Eliable · 使点击计数器和进度条协同工作

1 年前

mlri · 从不同的onclick事件执行相同的javascript函数

1 年前

Cymro · 如何将jquery$(this)与$(document).keyup一起使用

1 年前

Jack Maessen · 在处理程序上使用时如何获取输入类型

1 年前

BlueDogRanch · 使用jQuery Datepicker和dateFormat、altFormat和altField以及$(this)

1 年前

Jameel · Jquery:未捕获SyntaxError:在参数列表后的“Node”上执行“appendChild”失败:缺失)

1 年前