0

我希望在我的网站中添加一个 twitter 提要，以显示发布的图像，但不是单击图像，而是将您带到 twitter 以查看照片，我希望能够单击名为“查看照片”的链接并且图像在下面显示出来，然后通过单击“隐藏照片”来反转该过程。

到目前为止，我已经想出了这个，但是我正在使用已弃用的事件处理程序.live，并且想知道如何将这段 jQuery 重构为更有效的东西，因为我已经读到 存在性能问题.live，而且我认为我可能会以错误的方式解决这个问题？

  $(".twitterImage").hide();
            
   $(".showLink").live('click',function(e){
    e.preventDefault();
     $(this).next(".twitterImage").show();
     $(this).text('Hide Photo').css('display', 'block').removeClass("showLink").addClass("hideLink");
        
   });

    $(".hideLink").live('click',function(e){
      e.preventDefault();
       $(this).next(".twitterImage").hide();
       $(this).text('View Photo').removeClass("hideLink").addClass("showLink");
        
    });

任何帮助表示赞赏，我相信你们中的一些人正在惊恐地看着这篇文章，所以我为此道歉。

4

1 回答 1

1

如果我是你，我会使用 jQuery 的toggle()函数，并使用click()函数附加事件处理程序。请参阅下面的示例。

jsFiddle 演示

HTML

<a class="imageLink" href="#">Show Photo</a>
<img class="twitterImage" src="http://doc.jsfiddle.net/_images/jsfiddle-logo-thumb.png"/>

CSS

.imageLink {
    display: block;
}

.twitterImage {
    display: block;
}

Javascript (jQuery)

$(".twitterImage").hide();

$(".imageLink").click( function(e){
    e.preventDefault();
    var text = $(this).text();
    text = text == 'Show Photo' ? 'Hide Photo' : 'Show Photo';
    $(this).text(text);
    $(this).next(".twitterImage").toggle(500);
});
于 2013-06-06T14:27:52.410 回答