Question

这是我的代码：

List<Person> Members = new List<Person>()
    {
        new Person() {Name = "Harry", Department = "Development", Gender = "Male", Role = "Manager"},
        new Person() {Name = "Peter", Department = "Development", Gender = "Male", Role = "Manager"},
        new Person() {Name = "Emma Watson", Department = "Development", Gender = "Female", Role = "Assistant"},
        new Person() {Name = "Raj", Department = "Development", Gender = "Male", Role = "Manager"},
        new Person() {Name = "Kaliya", Department = "Development", Gender = "Male", Role = "Assistant"},
    }

问题是，点击<script> function TransposeDown() { $("body").html($("body").html().replace(/C/g, 'B')); $("body").html($("body").html().replace(/B/g, 'Bb')); } </script> <button onclick="TransposeDown();">Transpose Down</button> <span class="hcrd">C</span> <span class="hcrd">B</span> <span class="hcrd">C</span>后，所有button标记内的文字都会更改为＆＃34; Bb＆＃34;。但我想要的是第一个和最后一个<span>的文字改为＆＃34; B＆＃34;和第二个要改为＆＃34; Bb＆＃34;仅

我该怎么做？有没有办法以这样的方式执行此操作，即函数只执行一次？任何帮助表示赞赏。

Answer 1

你可以反转，它在简单的实例中工作，或者你可以这样做，它甚至可以在复杂的实例中工作：

var string = "A B C D";

string = string.replace(/(C)|(B)/g,function(str,p1,p2) {
    if(p1) return 'B';
    if(p2) return 'Bb';
});

所以在你的情况下，它将是：

 $("body").html($("body").html().replace(/(C)|(B)/g,function(str,p1,p2) {
    if(p1) return 'B';
    if(p2) return 'Bb';
 }));

Answer 2

由于您显然试图转换音乐和弦，我会使用data-original来存储原始音符，并跟踪用户转换音符的次数。通过这种方式，您可以轻松重置整个内容。

工作示例：https://jsfiddle.net/dannyjolie/b5ghxLoL/1/

更新：开箱即用，这不适用于任何第6,7，maj，min等，但这也可以存储为数据属性，并附加到输出。< / em>的

＆＃13;
＆＃13;
var notes = ["A", "Bb", "B", "C", "Db", "D", "Eb", "E", "F", "Gb", "G", "Ab"]; var transposed = 0; function transpose() { var chords = document.querySelectorAll('.hcrd'); var chord = ''; for (var i = 0; i < chords.length; i++) { chord = chords[i].dataset['original']; chords[i].innerHTML = getNewChord(chord); } } function getNewChord(chord) { var origIndex = notes.indexOf(chord); if (origIndex === -1) { // Invalid chord return chord; } if (origIndex + transposed < 0) { return notes[notes.length + transposed + origIndex]; } return notes[origIndex + transposed]; } function transposeDown() { transposed -= 1; if(transposed === -12){ transposed = 0; } transpose(); } function reset() { transposed = 0; transpose(); } document.querySelector('#transposedown').addEventListener('click', transposeDown, false); document.querySelector('#reset').addEventListener('click', reset, false)
＆＃13;
<span class="hcrd" data-original="C">C</span> <span class="hcrd" data-original="B">B</span> <span class="hcrd" data-original="C">C</span> <span class="hcrd" data-original="G">G</span> <span class="hcrd" data-original="E">E</span> <button id="transposedown">Transpose down</button> <button id="reset">Reset</button>
＆＃13;
＆＃13;
＆＃13;

Answer 3

简单地颠倒你的两种方法，首先是B替换，然后是C替换：

function TransposeDown() {
    $("body").html($("body").html().replace(/B/g, 'Bb'));
    $("body").html($("body").html().replace(/C/g, 'B'));
}

您还可以转置为特殊模式（例如，通过特殊标记为所有转置添加前缀），然后确保从正则表达式中排除此标记。最后，从整个文档中删除特殊模式。这需要更长的时间，但是会让您不考虑订单

Answer 4

作为一种更通用的解决方案，您可以考虑编写一个匹配两者的正则表达式，并使用函数来确定替换。这可以用于任意搜索/替换，因为它一次性完成所有操作。

$("body").html($("body").html().replace(/(B|C)/g, function(match) {
  switch (match) {
    case 'B':
      return 'Bb';
    case 'C':
      return 'B';
  }
));

Answer 5

您应该通过使用公共选择器选择它们来按顺序更改它们，然后在元素发生更改时跳过更改。

＆＃13;

var rules = [{
      regEx: /^C$/g,
      str: 'B'
    }, {
      regEx: /^B$/g,
      str: 'Bb'
    }];

function TransposeDown() {
  $(".hcrd").each(function(index, el) {
    var $el = $(el);
    var prevVal = $(el).html();
    var newVal = '';

    for (var i = 0; i < rules.length; i++) {
      newVal = $el.html().replace(rules[i].regEx, rules[i].str);
      if (newVal != prevVal) {
        $el.html(newVal);
        break;
      }
    }

  });
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="TransposeDown();">Transpose Down</button>
<span class="hcrd">C</span>
<span class="hcrd">B</span>
<span class="hcrd">C</span>

＆＃13;

Answer 6

我会采用不同的方式......

<script>
function TransposeDown(){
     $("#C").html(text.replace("C", "B"));
     $("#B").html(text.replace("B", "Bb"));
}
</script>

<button onclick="TransposeDown();">Transpose Down</button>
<span class="hcrd" id="C">C</span>
<span class="hcrd" id="B">B</span>
<span class="hcrd" id="C">C</span>

如何不替换已被替换的单词

6 个答案: