Question

我希望在我的网站中添加一个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");

    });

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

由于

Answer 1

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

jsFiddle demonstration

<强> 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);
});

实现Twitter中的视图照片功能

1 个答案:

jsFiddle demonstration