jQuery - 附加一些文本问题

Question

单击图像时，我必须将一些文本附加到另一个字段。我已经让图像出现在“另一个 div”中，但文本不会出现。

我的 HTML 是这样的:

<div class='smallImg'><img alt='En beskrivelse' class='smallImgImg' src='flot.jpg'></div>

<div class='smallImgDesc'>        
    <span style='font-size:10px;'>
        Here should the description be..
    </span>
</div>


<div id='bigImg'>Image appears here</div>
<div id='bigImgText'>her skal beskrivelsen komme</div>

还有 JS:

$('.smallImgImg').click(function(){

    var smallImgText = $(this).next('.smallImgDesc');

    $('#bigImg').empty().append($(this).clone());
    $('#bigImgText').empty().append($(smallImgText).clone());

});

因此，当我单击图像 (.smallImgImg) 时，它会在 #bigImg div 中显示它，这是有效的。然后我想在#bigImg 下面添加描述。但似乎我无法捕捉到 .smallImgDesc，因为#bigImgText 只是变空了。

我也尝试过这样做:

var smallImgText = $(this).find('.smallImgDesc');

...现在不行了，我不知道现在该怎么办。我希望有人可以帮助我:)

Answer 1

选择器错误。您必须选择父级之后的元素:

var smallImgText = $(this).parent().next('.smallImgDesc');

我还删除了 smallImgText 周围的 $ 包装器，因为绝对没有必要将 jQuery 对象包装在另一个 jQuery 对象中。为了避免这种困惑，您可以为所有 jQuery 对象变量添加前缀 $，这是惯例。

演示:http://jsfiddle.net/kgH3K/