JQuery 使用相同的上一个/下一个按钮的多个幻灯片

Question

我正试图找出一个令人沮丧的问题。

我现在拥有的：

• 一个 ul 包含两个 li，每个包含一个 3x3 table。
• 一个 jQuery“幻灯片”脚本，一次显示一个 table。
• table 两侧各有两个 div（用于“幻灯片放映”，prevButton 和 nextButton）。
• 单击td“展开”特定div，覆盖整个3x3 table（prevButton 和nextButton 仍然可见）。
• 点击展开的div 将其关闭，table 再次可见。
• 当没有div 展开且table 可见时，nextButton 和prevButton 用于转到下一个/上一个table。

http://jsfiddle.net/m1djrrj8/

我想要做什么：

• 当 div 展开时（通过单击 td），table 被覆盖，nextButton 和 prevButton 应该不用于转到下一个/上一个table，而是用于显示下一个/上一个展开的div。

小提琴的粗略结构

了解小提琴

• 有两个表格，有 9 个单元格 (1,2,3,4,5,6,7,8,9) 和 (A,B,C,D,E,F,G,H,I)，通过点击黄色边栏从一个切换到另一个。
• 单击每个单元格会打开一个特定的 div：
  • (1,2,3,4,5,6,7,8,9) 显示 (sq1,sq2,sq3,sq4,sq5,sq6,sq7,sq8,sq9)
  • (A,B,C,D,E,F,G,H,I) 显示 (sqA,sqB,sqC,sqD,sqE,sqF,sqG,sqH,sqI)。
• 当显示 sq1~9 或 sqA~I 时，我想使用黄色侧边栏来幻灯片显示 sq1 到 sq9 或 sqA 到 sqI，而不是切换表格。

JSFiddle 有点长，对此我深表歉意，但如果有人能帮我解决这个问题，我将不胜感激；我要扯头发了！

Answer 1

“.button”被编程为在<li> 之间切换。因此，当您单击上一个按钮或下一个按钮时，当前的<li> 会消失，而另一个<li> 会出现。
为了得到想要的结果，你必须改变逻辑：

1. 检查<div> 是否覆盖了表格。
   
2. 如果是这样，隐藏<div> 并显示下一个<div>。