单击按钮可更改多个跨度项目

简单的例子：从text()回调更改内容：

$("#change").on("click",function() {
 $("span").text(function(i,txt) {
   return {
     "A":"B",
     "B":"C",
     "C":"D",
     "D":"A"
   }[txt];
 });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>A</span>
<span>B</span>
<span>C</span>
<span>D</span>
<button id="change">CHANGE</button>

如果您的span元素已分组，则可以使用.append()来设定父级：

$("#change").on("click", function(){
  $("#spans").append( $("#spans span").eq(0) )
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="spans">
  <span>A</span>
  <span>B</span>
  <span>C</span>
  <span>D</span>
</div>
<button id="change">CHANGE</button>

如果你的 SPANS 没有分组（DOM 中不相关的位置），而是共享一个相同的类名，你可以：

• map <span>的内容到内容数组中
• 修改数组
• 最后将修改后的阵列发送到每个 SPAN

var spans = $(".spn");
// Map spans content into Array
var conts = spans.map(function(){
  return this.innerHTML;
}).get();
$("#change").on("click", function(){
  
  // Modify the Array first
  // DIRECTION >>>
  // conts.unshift(conts.pop());
  // DIRECTION <<<
  conts.push(conts.shift());
  // Than send the array values to spans
  spans.text(function(i){
    return conts[i];
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="spn">A</span>
<span class="spn">B</span>
<span class="spn">C</span>
<span class="spn">D</span>
<button id="change">CHANGE</button>

是的，在所有示例中，您都可以根据需要多次单击并执行切换！
如果您不想这样，请不要使用.on( .one(

好吧，如果您只想有条件地在单击时更改范围文本，则可以使用 JQuery each（） 方法循环所有span：

.HTML：

<span>A</span>
<span>B</span>
<span>C</span>
<span>D</span>
<br><br><br>
<div id="change">CHANGE</div>

JQuery：

$(document).ready(function(){
    $('#change').click(function(){
            $("span").each(function(){
                if ($(this).text() == 'A') {
                    return $(this).text('B');
                }
                else if ($(this).text() == 'B') {
                    $(this).text('C');
                }
                else if ($(this).text() == 'C') {
                    $(this).text('D');
                }
                else if ($(this).text() == 'D') {
                    $(this).text('A');
                }            
        });        
    });
});

演示：http://jsfiddle.net/xpadzam8/

是的，你可以很容易地做到这一点，例如，使用jquery，你的点击可以被捕获：

$("#change").on("click",function(){
 $("span").text(function(i,txt){
    switch(txt){
       case "A" : $(this).text("B"); break;
       case "B" : $(this).text("C"); break;
       case "C" : $(this).text("D"); break;
       case "D" : $(this).text("A"); break;
    }
 });
});

如果你看一下文档，你会发现你对 replaceAll（） 的用法是不正确的。

使用 repalceWith。

另外，由于您想一键替换所有跨度，因此请摆脱if-else。

好吧，我对你的代码做了一些更改，你可以看看JSFiddle。

$('#changeText').click(function(){
    $("span").text("my text");
});

根据您的代码，您需要的是.each()和$(this).html();函数。

更新的代码

$('#change').click(function(){
 $('span').each(function(){
   if ($(this).html() == 'A') {
     $(this).html('B');
   }
   else if ($(this).html() == 'B') {
     $(this).html('C');
   }
   else if ($(this).html() == 'C') {
     $(this).html('D');
   }
   else if ($(this).html() == 'D') {
     $(this).html('A');
   }
 });
});

更新的小提琴

也许你可以做到：

$(document).ready(function(){
        $(document).ready(function(){
        $('#change').click(function(){
            $('span').each(function(){
                var txt=$(this).text();
                switch (txt){
                    case 'A': $(this).text('B');break;
                    case 'B': $(this).text('C');break;
                    case 'C': $(this).text('D');break;
                    case 'D': $(this).text('A');break;
                }
            })
        });
    });

试试这个技巧

 $('#change').click(function(){
        var f = $("span").first();
        var c = f.detach();
        var l = $("span").last();
        c.insertAfter(l)
    });

$('#change').click(function() {
  var f = $("span").first();
  var c = f.detach();
  var l = $("span").last();
  c.insertAfter(l)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="spans">
  <span>A</span>
  <span>B</span>
  <span>C</span>
  <span>D</span>
</div>
<button id="change">CHANGE</button>

$('#changeButton').click(function (event) {
    var _changeMap = {
        A: 'B',
        B: 'C',
        C: 'D',
        D: 'E',
    };
    $('span').each(function (index, element) {
        element.innterText = _changeMap[element.innerText.trim()];
    });
    $.preventDefault();
});

你的问题不是很清楚。如果要使用相同的文本更改所有范围的文本，只需选择所有范围即可。喜欢这个：

$(document).ready(function(){
    $('#change').click(function(){
    $("span").text('your text');
    });
 });

如果要使用自定义文本单独更改每个跨度（在您的代码中，您似乎将每个跨度的文本替换为下一个跨度的文本，除了最后一个跨度采用第一个跨度的文本），您应该使用 .each() 遍历跨度。无论跨度位于页面中的哪个位置，这都可以工作。如果您只想选择具有某个类的跨度，只需将span替换为 span.yourclass 即可。像这样：

$(document).ready(function(){
    $('#change').click(function(){
    var first=$("span").first().text(); //store the text of the first span
    $("span").not(':last').each(function(){ //select all spans except last
    $(this).text($(this).next('span').text()); //change text of each span to text of next span
    });
    $("span").last().text(first);   //set the text of the last span to the text of the first 
    });
 });

https://jsfiddle.net/fdkxu2dc/1/