使 按钮 在 jQuery.load ( ) 完成 之前 不可 点击

3wabscal  于 2022-11-22  发布在  jQuery
关注(0)|答案(2)|浏览(178)

我目前正在使用以下代码作为我的“阅读更多”按钮:

$(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()完成之前不可单击?

zphenhs4

zphenhs41#

最 简单 的 方法 是 在 链接 中 添加 一 个 加载 类 。 我 也 刚刚 对 你 的 代码 做 了 一 个 快速 清理 。 我 没有 研究 它 是 如何 工作 的 , 但 我 相信 如果 你 多 花 点 时间 , 你 可以 让 它 更 有 效率

$(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');

mklgxw1f

mklgxw1f2#

你能不能不运行.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;
 });
});

相关问题