javascript-在每次单击和添加类期间检查位置

2019-11-21 07:38:02 阅读：189 来源： 互联网

如果希望显示第一个或最后一个选项卡,则希望将类.disabled添加到左侧和/或右侧控件(.tab-left,.tab-right)中,以便用户可以看到它们已经到达末尾并且无法单击再进一步.

现在,我这样的事情是为了防止用户走到尽头.

if (tabs are at the end) {
   return;
 }

这适用于无法单击结束的用户,但是如果我在返回之前添加了该类,则问题是在选项卡到达末尾并且用户再次单击之前,不会添加.disabled类.

if (tabs are at the end) {
   $('.tab-right').addClass('disabled');
   return;
 }

我需要在显示最后一个选项卡时而不是在用户尝试单击结尾时添加禁用的类.

这是js小提琴的链接：http://jsfiddle.net/uue6pgcx/

解决方法:

您可以尝试的一种方法是在动画完成后启用/禁用左右按钮.

$ul.filter(':not(:animated)').animate({
    "left": dir + liWidth
  }, {
    complete: function () {
    // Calculate the number of items in the container (without left and right navigation buttons).
    var lisContainer = Math.round(($container.width() - $left.outerWidth() - $right.outerWidth()) / liWidth);
    // Disable right button when list is moved to the left a number of items
    // such as the remaining number of them is less or equal than the number
    // of items that fit in the container.
    $right.toggleClass('disabled', $li.length + $ul.position().left / liWidth <= lisContainer);
    // Disable left button when list is in the origin. 
    $left.toggleClass('disabled', $ul.position().left === 0);
  }
});

免责声明：根据jQuery outerWidth additional notes,在某些情况下,与尺寸相关的API返回的数字(包括.outerWidth())可能是小数.代码不应该假定它是整数.因此,希望Math.round足以获取正确的数字.
也许有一种更好的方法来计算是否必须禁用/启用右键,而不是依靠适合容器的项目数.

这是经过上述修改的代码：
http://jsfiddle.net/0Lsepxeu/

标签：jquery-plugins,javascript,jquery
来源： https://codeday.me/bug/20191121/2050055.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript-在每次单击和添加类期间检查位置