当它到达第四个标签时，它不应该去第一个

Posted 2023-02-25

【中文标题】当它到达第四个标签时，它不应该去第一个

【英文标题】：when it reached fourth tab it should not go to first

【发布时间】：2017-08-28 01:34:24

【问题描述】：

我是 js 新手 当我单击左右箭头时，选项卡会返回 但圆圈应该停止。当它到达第四个标签时，它不应该转到第一个。 左箭头也应该这样。 在下面提供我的代码。

https://codepen.io/chandrashekhar/pen/mMGRbq

 function move(to) 
    var current = $('li.current').index();
    var total = $('.tabs .tab-link').length;
    var add;
    switch (to) 
      case 'left':
        add = -1;
        break;
      case 'right':
        add = 1;
        break;
    
    $('.tabs li.tab-link').eq((current+add)%total).click();
  

【参考方案1】：

给你：

function move(to) 
  var current = $('li.current').index();
  var total = $('.tabs .tab-link').length;

  var add;
  switch (to) 
    case 'left':
      current > 0 ? add = -1 : add = 0;   // don't decrement if we're already at the leftmost tab
      break;
    case 'right':
      add = 1;
      break;
  
  $('.tabs li.tab-link').eq((current+add)).click();   // removed modulus operator to prevent wrapping back to 0

我已向 case 'left': 添加了一个条件，以检查我们当前是否位于最左侧的选项卡（索引 0），如果是，请不要进一步递减。 我已从 $('.tabs li.tab-link').eq((current+add)).click(); 中删除了模数 (%) 运算符，以防止当我们单击右箭头并激活最右侧的选项卡时索引返回到 0。

【参考方案2】：

我将以下代码添加到您的函数中，以便在到达结束选项卡时提前终止：

if (to === 'right' && current === (total - 1)) 
  return;
 else if(to === 'left' && current === 0) 
  return;

工作示例：https://codepen.io/anon/pen/RZeNWq?editors=0001

作为旁注，我恳请您在选择 DOM 元素时考虑更大的图景，例如在您的代码中：

var current = $('li.current').index();

具有current 类的li 元素非常通用- 如果您的页面上存在一个完全不相关的li 标记，而该标签也具有current 类，那么您的代码将会中断。如果你有一个导航栏，其中的菜单项也有一个类current？或者即使您的页面有 2 组选项卡，此代码也不允许这样做。

这可以更好地表示为：

var current = $('.tab-link.current').index();

【讨论】：

嘿，我还有一个疑问...我正在尝试编写 jasmine 测试用例...是否可以将所有内容放在一个方法中，以便我可以为我的测试用例调用该方法-- - 这个点击功能 $('ul.tabs li').click(function()