Question

我有一个和弦图表应用程序基本上可以在整个键中上下移调和弦图表，但现在我想扩展该应用程序并允许某人选择一个键并在点击事件时自动转到该键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);     
  }); 
}

function transposeDown(x){
    $('.chord'+x).each(function(){
    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],1);
        //var chordIndex = $.inArray(match[0], chords, -1);
        output += parts[index++] + chords2[chordIndex-1];
    }
    output += parts[index];
    $(this).text(output);
});
}

感谢任何帮助。答案将被接受！谢谢

Answer 1

这就是你想要的吗？一个会创建点击事件的函数吗？

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

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

还存储每个和弦数组的转置版本
单击一个音符时，在原始和弦数组中找到它的元素（使用上面的$(this).text()匹配音符名称）
找到匹配项后，您可以使用相同的数组索引找到其转置版本

和弦图表 - 单击即可跳至键

1 个答案: