Javascript 和弦图-单击可跳到关键点

我有一个和弦图应用程序，基本上可以在各个键之间上下转换和弦图，但现在我想扩展该应用程序，允许有人选择一个键，并使用javascript或jquery中的函数在单击事件时自动转到该键。有人能帮我弄清楚吗？逻辑似乎很简单，但我不知道如何实现它。这里是我目前的功能，允许用户上下转换

var match;
var chords = ['C','C#','D','D#','E','F','F#','G','G#','A','A#','B','C','Db','D','Eb','E','F','Gb','G','Ab','A','Bb','B','C'];
var chords2 = ['C','Db','D','Eb','E','F','Gb','G','Ab','A','Bb','B','C','C#','D','D#','E','F','F#','G','G#','A','A#','C'];
var chordRegex = /(?:C#|D#|F#|G#|A#|Db|Eb|Gb|Ab|Bb|C|D|E|F|G|A|B)/g;

function transposeUp(x) {   
  $('.chord'+x).each(function(){ ///// initializes variables /////  
  var currentChord = $(this).text(); // gatheres each object 
  var output = "";      
  var parts = currentChord.split(chordRegex);       
  var index = 0;        
  /////////////////////////////////         
  while (match = chordRegex.exec(currentChord)){            
    var chordIndex = chords2.indexOf(match[0]);             
    output += parts[index++] + chords[chordIndex+1]; 
  }         
  output += parts[index];       
  $(this).text(output);     
  }); 
}

---

---

感谢您的帮助。答案将被接受！谢谢你这就是你想要的吗？将创建单击事件的函数

$('[class^="chord"]').click(function() {
    alert($(this).text() + ' clicked');
});

根据您的评论：以下是一些伪代码，让您朝着正确的方向前进：

• 还存储每个和弦数组的转置版本
• 单击注释时，在原始和弦数组中查找其元素（使用上面的

  $（this）.text（）

  匹配注释名称）
• 找到匹配项后，可以使用相同的数组索引查找其转置版本

---

没有，但感谢您的快速响应。我有12个和弦选择。。。C、 Db、D、Eb、E、F、F#、G、Ab、A、Bb和B单击其中一个键后，我想跳转所选键。如果我在“C”中，单击G，我需要向上移动7步，如果Ab，我需要向下移动4步，图表中的每个和弦都需要这样做。这有用吗？

$('[class^="chord"]').click(function() {
    alert($(this).text() + ' clicked');
});