jQuery Jquery更改父div的背景
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/258317/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery changing background of parent div
提问by Jimoc
I have the following snippet in one of my html pages :
我的其中一个 html 页面中有以下代码段：
<div class="inputboximage">
<div class="value2">
<input name='address1' value='Somewhere' type="text" size="26" maxlength="40" />
<br />
</div>
</div>
My problem is that I need the inputboximage backgroundto change when I click in the address1text field and to revert to the original when it loses focus.
我的问题是我需要在inputboximage background单击address1文本字段时进行更改，并在失去焦点时恢复到原始状态。
I have used the following :
我使用了以下内容：
<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>
but instead of replacing the image, it seems to be adding a background image to the value2 div as you would expect. I can use parentNode.parentNodein this case, but there is also a chance that the inputboxImagenode could be further up or down the parent tree.
但不是替换图像，它似乎像您期望的那样将背景图像添加到 value2 div。我可以parentNode.parentNode在这种情况下使用，但也有可能inputboxImage节点可以在父树上进一步向上或向下。
Is there a way I can change this code so that it will navigate down the parent tree until it finds a div called inputboximageand replace the image there?
有没有办法可以更改此代码，以便它向下导航父树，直到找到一个调用的 divinputboximage并替换那里的图像？
Also, if I have two different div classes, inputboximageand inputboximageLarge, is there a way to modify this function so that it will work with both, replacing the background image with a different image for each one?
另外，如果我有两个不同的 div 类，inputboximage并且inputboximageLarge，有没有办法修改这个函数，以便它可以同时使用这两个类，为每个类用不同的图像替换背景图像？
回答by
I think using
我认为使用
$(this).parents('div.inputBoxImage').css(...)
instead of $(this.parentNode)should work.
而不是$(this.parentNode)应该工作。
See the jQuery traversing documentation
查看jQuery遍历文档
Edit: updated following Prody's answer (changed parent to parents)
编辑：根据 Prody 的回答更新（将父级更改为父级）
回答by Prody
I'm not 100% sure but I think what you need is what Phill Sacre's answer suggests except using parents(notice the last s)
我不是 100% 确定，但我认为你需要的是 Phill Sacre 的答案所建议的，除了使用parents（注意最后一个 s）
From jQuery API:
来自 jQuery API：
parent( String expr ) returns jQuery Get a set of elements containing the unique parents of the matched set of elements.
parent( String expr ) 返回 jQuery 获取一组元素，其中包含匹配元素集的唯一父元素。
parents( String expr ) returns jQuery Get a set of elements containing the unique ancestors of the matched set of elements (except for the root element).
parent( String expr ) 返回 jQuery 获取一组元素，其中包含匹配元素集的唯一祖先（根元素除外）。
回答by Tamas Czinege
Now since in HTML only IDs are unique, you can reference the div directly without doing any traversal:
现在因为在 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>
Note that while it is possible to filter the parent elements for CSS classing, using style classes dor behaviour is a Bad Idea TM and you should avoid doing that. But if you are really desperate, you can give it a try:
请注意，虽然可以过滤 CSS 分类的父元素，但使用样式类或行为是一个坏主意 TM，您应该避免这样做。但如果你真的很绝望，你可以试一试：
$("input").focus(function () {
$(this).parents('div.inputboximage').css('background-image', 'url(images/curvedinputblue.gif)');
});
回答by adardesign
.parent().css(changes here)
.parent().css（此处更改）
