Javascript 当目标相同时，我不想要切换功能

我正在尝试创建一个逐步的顺序，并使用data id=“x”来告诉选择内容时哪些内容是可见的

我试图实现的是，如果数据id具有相同的目标，则切换将不起作用，而只是选择单击的另一个div

有什么想法吗

这是我的代码：

$('li').on('click',function(e) {
  e.preventDefault();
  // remove selected class from links after the current one
  $(this).closest('section').nextAll('section').find('li').removeClass('selected');
  // remove selected from siblings, toggle current selected class
  $(this).siblings('li').removeClass('selected').end().toggleClass('selected');
  var $target = $('#'+$(this).attr('data-id'));
  if ($target.length) {
    // hide any steps after the current one that may be shown
    $(this).closest('section').nextAll('section').find('.step').not($target).removeClass('active');
    // toggle display of selected step
    $target.toggleClass('active'); 
  } else {
    console.log('do something else to end this thing');
  }
})

是我的JSFIDLE，包含示例和上面的代码

---

我能举一个例子，说明我已经拥有的代码会是什么样子，并给出一个小小的解释吗？谢谢

您可以使用

指针事件：无用于
。所选的
类


$（'li'）。在（'click'，函数（e）{
if（$（this）.hasClass（'selected'））{
返回false；
}否则{
e、 预防默认值（）；
//从当前类之后的链接中删除所选类
$（this）.最近的（'section'）.nextAll（'section'）.find（'li'）.removeClass（'selected'）；
//从同级中删除选定项，切换当前选定类
$（this）.sides（'li'）.removeClass（'selected'）.end（）.addClass（'selected'）；
var$target=$（'#'+$（this.attr（'data-id'））；
如果（$target.length）{
//隐藏当前步骤之后可能显示的任何步骤
$（this）.最近的（'section'）.nextAll（'section'）.find（'.step'）.not（$target）.removeClass（'active'）；
//切换所选步骤的显示
$target.addClass（'active'）；
}否则{
log（'do something to end this this'）；
}
}
})
h1{
字体大小：20px；
}
.步骤{
显示：无；
}
.主动{
显示：块；
}
.选定{
背景：#27ae60！重要；
颜色：#fff！重要；
}
保险商实验室{
填充：0；
}
李{
列表样式：无；
}
.香蕉{
填充：20px；
颜色：#7f8c8d；
背景#ecf0f1；
显示：内联块；
边界半径：10px；
光标：指针；
宽度：25%；
文本对齐：居中；
字体大小：16px；
字号：700；
}
.嗨{
颜色：#e74c3c；
边框底部：2个点#e74c3c；
}
h1{
边缘顶部：30px；
边缘底部：30px；
}
#相同的目标{
边缘顶部：30px；
背景：#9b59b6；
填充：20px；
颜色：#fff；
}
#同一目标{
页边距底部：0；
}

第一步，请选择一些


(传说中的)精灵


金刚


宇航员


Sprite的第二步-选择另一个


麦当劳


汉堡王


蒂姆·霍顿


金刚的第二步-选择另一个


麦当劳


汉堡王


蒂姆·霍顿


宇航员的第二步——选择另一个


麦当劳


汉堡王


蒂姆·霍顿



现在选择另一个品牌并观看此内容切换，即使目标相同。

您可以使用
指针事件：无用于
。所选的
类


$（'li'）。在（'click'，函数（e）{
if（$（this）.hasClass（'selected'））{
返回false；
}否则{
e、 预防默认值（）；
//从当前类之后的链接中删除所选类
$（this）.最近的（'section'）.nextAll（'section'）.find（'li'）.removeClass（'selected'）；
//从同级中删除选定项，切换当前选定类
$（this）.sides（'li'）.removeClass（'selected'）.end（）.addClass（'selected'）；
var$target=$（'#'+$（this.attr（'data-id'））；
如果（$target.length）{
//隐藏当前步骤之后可能显示的任何步骤
$（this）.最近的（'section'）.nextAll（'section'）.find（'.step'）.not（$target）.removeClass（'active'）；
//切换所选步骤的显示
$target.addClass（'active'）；
}否则{
log（'do something to end this this'）；
}
}
})
h1{
字体大小：20px；
}
.步骤{
显示：无；
}
.主动{
显示：块；
}
.选定{
背景：#27ae60！重要；
颜色：#fff！重要；
}
保险商实验室{
填充：0；
}
李{
列表样式：无；
}
.香蕉{
填充：20px；
颜色：#7f8c8d；
背景#ecf0f1；
显示：内联块；
边界半径：10px；
光标：指针；
宽度：25%；
文本对齐：居中；
字体大小：16px；
字号：700；
}
.嗨{
颜色：#e74c3c；
边框底部：2个点#e74c3c；
}
h1{
边缘顶部：30px；
边缘底部：30px；
}
#相同的目标{
边缘顶部：30px；
背景：#9b59b6；
填充：20px；
颜色：#fff；
}
#同一目标{
页边距底部：0；
}

第一步，请选择一些


(传说中的)精灵


金刚


宇航员


Sprite的第二步-选择另一个


麦当劳


汉堡王


蒂姆·霍顿


金刚的第二步-选择另一个


麦当劳