如何定义多点击函数共享的变量？实现矩形文本联动交互

我来帮你搞定矩形点击的功能，同时保证箭头按钮依然能正常工作。核心思路是给每个矩形绑定点击事件，获取它对应的索引并更新now变量，然后同步更新文本显示和矩形的高亮状态。

修改后的完整代码 #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" id="prev">&#8249;</a>
<a href="#" id="next">&#8250;</a>
<Br>
<div class="rectangles">
  <svg>
    <rect id="rect1" />
  </svg>
  <svg>
    <rect id="rect2" />
  </svg>
  <svg>
    <rect id="rect3" />
  </svg>
</div>
<div class="text">
  <p id="text1" class="text">Text 1</p>
  <p id="text2" class="text">Text 2</p>
  <p id="text3" class="text">Text 3</p>
</div>

<style>
svg { width: 100px; height: 50px; } 
rect:hover { fill: black !important; cursor: pointer; } 
#rect1 { fill: orange; width: 100px; height: 50px; } 
#rect2 { fill: teal; width: 100px; height: 50px; } 
#rect3 { fill: violet; width: 100px; height: 50px; } 
a { text-decoration: none; display: inline-block; padding: 8px 16px; margin-bottom: 2em; } 
a:hover { background-color: gray; color: black; } 
#prev, #next { background-color: #e5e5e5; color: black; } 
</style>

<script>
var p = $('.text > p'); 
var rect = $('.rectangles > svg'); 
var now = 0; 
p.hide().first().show(); 
rect.css("opacity",".3").first().css("opacity","1");

// 下一个按钮点击事件
$("#next").click(function (e) { 
  e.preventDefault(); // 阻止a标签默认跳转
  p.eq(now).hide(); 
  rect.eq(now).css("opacity",".3"); 
  now = (now + 1 < p.length) ? now + 1 : 0; 
  p.eq(now).show(); 
  rect.eq(now).css("opacity","1"); 
}); 

// 上一个按钮点击事件（修复未更新矩形透明度的问题）
$("#prev").click(function(e) { 
  e.preventDefault(); // 阻止a标签默认跳转
  p.eq(now).hide(); 
  rect.eq(now).css("opacity",".3"); // 新增：取消当前矩形高亮
  now = (now > 0) ? now - 1 : p.length - 1; 
  p.eq(now).show(); 
  rect.eq(now).css("opacity","1"); // 新增：高亮新的矩形
}); 

// 矩形点击事件
$('rect').click(function() {
  // 先取消当前选中项的状态
  p.eq(now).hide();
  rect.eq(now).css("opacity",".3");
  
  // 获取当前点击矩形对应的索引（通过父级svg在容器中的位置）
  now = $(this).closest('svg').index();
  
  // 设置新选中项的状态
  p.eq(now).show();
  rect.eq(now).css("opacity","1");
});
</script>

关键修改点说明 #

1. 添加矩形点击事件：给所有rect元素绑定点击事件，点击时完成三步操作：

   • 隐藏当前显示的文本，将当前高亮矩形的透明度恢复为0.3
   • 通过$(this).closest('svg').index()获取点击矩形所在svg的索引（该索引与文本p的索引一一对应），赋值给now变量
   • 显示对应索引的文本，将对应矩形的透明度设为1完成高亮

2. 修复上一个按钮的问题：原来的#prev点击事件未同步更新矩形透明度，现在补充了这部分逻辑，让箭头按钮的功能更完整。

3. 阻止默认跳转：给箭头按钮的点击事件添加e.preventDefault()，避免点击a标签时页面跳转到顶部。

这样修改后，无论是点击箭头按钮还是矩形，都能同步更新文本显示和矩形高亮状态，且now变量始终保持正确的当前选中索引，确保所有功能正常联动。

内容的提问来源于stack exchange，提问作者vw88