Question

我正在使用以下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（）部分会使背景发生变化，这也使我感到困惑。我怎样才能使它只有文字背景改变？

Answer 1

您尝试拨打的方法是.siblings()，而不是.sibling()。

这至少会修复控制台错误（在错误控制台中查找，不是吗？）

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

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

请参阅http://jsfiddle.net/alnitak/758FD/

Answer 2

我认为没有sibling()方法，我猜您正在寻找的是next()：

$(this).next().css("background-color","white");

Answer 3

我认为this现在可能是parent - 也就是<div>，这意味着siblings()无效 - 您应该使用children()

在动画后立即运行jQuery函数

3 个答案: