0

我使用以下 JSfiddle：http: //jsfiddle.net/edddotcom/7NQKU/1/

我正在使用回调函数在单击图像后立即更改文本的背景，

这是的兄弟，所以我希望我可以使用 .sibling() 但它不起作用，我做错了什么？

HTML：

<div class="container">
     <img src="http://cloudsmaker.com/hipsterwall/img/salto-al-norte.jpg" height="100%">
         <span>TEXT HERE TEXT HERE TEXT HERE </span>
</div>

CSS：

.container {
    display: block;
    width: 900px;
    height: 116px;
    background-color: red;
}
span {
    float: left;
    margin-top: 10px;
    margin-left: 10px;
    max-height: 100%;
}
img {
    float: left;
    height:100%;
    max-width: 400px;
    min-width: 200px;
}

JavaScript：

$(document).ready(function() {
    //ON CLICK
    $("img").toggle(function () { //fired the first time
        $(this).parent().animate({
            //FIRSTCLICK COMMAND
            height: "232px"
        },function(){
            $(this).sibling().css("background-color","yellow");
        });

    }, function () { // fired the second time 
        $(this).parent().animate({
            //SECONDCLICKCOMMAND
            height: "116px"
        },function(){
            $(this).sibling().css("background-color","white");
        });

    });

});

删除 .sibling() 部分会使背景发生变化，这也让我感到困惑。我怎样才能使它只有文本背景发生变化？

4

3 回答 3

1

您尝试调用的方法是.siblings()，不是.sibling()。

这至少可以修复控制台错误（您确实查看了错误控制台，不是吗？）

但是，由于您正在为容器设置动画<div>（即$('img').parent()），因此您实际上需要更改作为子项的跨度div。

$(this).children('span').css("background-color","yellow");

见http://jsfiddle.net/alnitak/758FD/

于 2013-04-21T20:25:08.483 回答
0

我认为this现在可能是parent- 即<div>, 这意味着siblings()不起作用 - 你应该使用children()

于 2013-04-21T20:26:06.400 回答
0

我不认为有一种sibling()方法，我猜你正在寻找的是next()：

$(this).next().css("background-color","white");
于 2013-04-21T20:24:12.533 回答