0

我有以下html：

<div class="container">
    <img class="imgtab" src="http://cloudsmaker.com/hipsterwall/img/salto-al-norte.jpg">
    <p class="textab">Paragraph Text</p>
</div>

使用以下 javascript：

$(document).ready(function () {
    //Initial Conditions
    $(".container > img").width("200px");
    $(".container > img").height("116px");
    $(".container > p").hide();

    //ON CLICK
    $(".container > img").toggle(function () { //fired the first time
        $(this).animate({
            width: "400px",
            height: "232px"
        });
        //$(**selectorneeded**).show();//This is where i need to show the text
    }, function () { // fired the second time 
        $(this).animate({
            width: "200px",
            height: "116px"
        });
        //$(**selectorneeded**).hide();//This is where i need to hide the text again
    });

});

这个想法是用户单击图像，图像从 200x116 像素扩展到 400x232 像素，然后在放大的图像下方出现一个文本块。然后，当再次单击图像时，文本消失并且图像恢复到较小的状态。

我需要能够引用 div 中的文本才能隐藏和显示它。

我将在同一页面上使用多个这些图像，因此我需要能够使用this选择器来引用已单击图像下的文本，而不是其他图像下的文本。

当我点击图像时，虽然this选择器变成了图像而不是 div，所以我不能参考

那也是div的孩子。我可以使用什么选择器来解决这个问题？

如果有帮助，这是一个 jsfiddle：http: //jsfiddle.net/edddotcom/um5ct/

4

1 回答 1

0 
$(this).next(".textab").hide();

有评论建议.siblings()，但由于您知道文本就在图像下方，因此.next()似乎更合适。

于 2013-04-19T20:48:31.010 回答