我的一个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,有没有办法修改这个函数,以便它可以同时使用它们,用每个不同的图像替换背景图像?
答案 0 :(得分:22)
我认为使用
$(this).parents('div.inputBoxImage').css(...)
代替$(this.parentNode)
应该有效。
请参阅jQuery traversing documentation
编辑:根据Prody的回答更新(父母已更改为父母)
答案 1 :(得分:2)
我不是百分百肯定,但我认为你所需要的是Phill Sacre的回答建议除了使用parents
(注意最后的s)
来自jQuery API:
parent(String expr)返回jQuery 获取一组元素,其中包含匹配元素集的唯一父元素。
parents(String expr)返回jQuery 获取一组元素,其中包含匹配元素集的唯一祖先(根元素除外)。
答案 2 :(得分:0)
现在因为在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)');
});
答案 3 :(得分:0)
.parent()。css(此处更改)