Question

我目前正在使用以下代码阅读更多按钮：

$(document).ready(function() {
  $("a.more-link").attr("href", "");
  $("a.more-link").attr("onclick", "return false;");  

  $('.readmore').each(function(index) {
    var $link = $(this);
    $(".readmore").prependTo('.' + $link.attr("id") + ' > #bottominfo');
  });

  $('.readmore').click(function() {  
    var $link = $(this);
    if ( $link.attr("alt") == "read more" ) {
      $('.' + $link.attr("id") + ' > #maincontent').load($link.attr("title") + ' #mainarticle', function(index) {
            $('.' + $link.attr("id") + ' > #maincontent').hide();  
            $('.' + $link.attr("id") + ' > #maincontent').slideToggle('slow');
          });

      $('.' + $link.attr("id") + ' > #maincontent').attr("class", $link.attr("id"));

      $link.attr('alt','read less');      
    } else {
      $('#'+ $link.attr("id") + ' > .' + $link.attr("id")).hide();
      $link.attr('alt','read more'); 
    }
    return false;
 });
});

我遇到的问题是，如果用户双击（或更多）按钮，它会多次调用该函数。

在.load（）完成之前，如何使按钮不可点击？

谢谢！

Answer 1

最简单的方法是在链接中添加加载类。我刚刚对你的代码进行了快速清理。我没有调查它是如何工作的，但我确定你是否花了更多时间才能使它更有效率

$(document).ready(function() {
  $("a.more-link").attr("href", "")
                  .attr("onclick", "return false;");  

  $('.readmore').each(function(index) {
    var $link = $(this);
    //wouldn't this call all the elements with "readmore" class????
    $(".readmore").prependTo('.' + $link.attr("id") + ' > #bottominfo');
  });

  $('.readmore').click(function() {
    var $link = $(this);

    //check if it has already been clicked
    if($link.hasClass("loading")) return false;
    //add the loading class
    $link.addClass("loading");


    if ( $link.attr("alt") == "read more" ) {
      $('.' + $link.attr("id") + ' > #maincontent').load($link.attr("title") + ' #mainarticle', function(index) {
            $('.' + $link.attr("id") + ' > #maincontent').hide()
                                                         .slideToggle('slow');

            //it's done now and we can remove the loading class so we can click it again
            $link.removeClass("loading");

          }).attr("class", $link.attr("id"));

      $link.attr('alt','read less');      
    } else {
      $('#'+ $link.attr("id") + ' > .' + $link.attr("id")).hide();
      $link.attr('alt','read more');

      //add it here as well
      $link.removeClass("loading");
    }
    return false;
 });
});

提示：我注意到您多次调用相同的选择器。始终检查api doc并查看您正在呼叫的方法确实返回。他们中的大多数确实返回了元素，因此您可以在没有$()

的情况下调用下一个方法

示例：$("div").hide().slideToggle('slow');

Answer 2

你能不能只在.load上运行这个函数吗？

$(document).load(function() {
  $("a.more-link").attr("href", "");
  $("a.more-link").attr("onclick", "return false;");  

  $('.readmore').each(function(index) {
    var $link = $(this);
    $(".readmore").prependTo('.' + $link.attr("id") + ' > #bottominfo');
  });

  $('.readmore').click(function() {  
    var $link = $(this);
    if ( $link.attr("alt") == "read more" ) {
      $('.' + $link.attr("id") + ' > #maincontent').load($link.attr("title") + ' #mainarticle', function(index) {
            $('.' + $link.attr("id") + ' > #maincontent').hide();  
            $('.' + $link.attr("id") + ' > #maincontent').slideToggle('slow');
          });

      $('.' + $link.attr("id") + ' > #maincontent').attr("class", $link.attr("id"));

      $link.attr('alt','read less');      
    } else {
      $('#'+ $link.attr("id") + ' > .' + $link.attr("id")).hide();
      $link.attr('alt','read more'); 
    }
    return false;
 });
});

使一个按钮不可点击，直到jquery .load（）完成

2 个答案: