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

假设我有多个跨度项，例如

<span>A</span>
<span>B</span>
<span>C</span>
<span>D</span>

---

提前谢谢

如果您只想有条件地单击更改span文本，您可以使用以下命令循环所有

span

：

HTML:

---

演示：

是的，您可以轻松做到这一点，例如，使用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;
    }
 });
});

试试这个黑客

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

    });

$（“#更改”）。单击（函数（）{
var f=$（“span”）.first（）；
var c=f.detach（）；
var l=$（“span”）.last（）；
c、 插入符（l）
});

A.
B
C
D
更改
简单示例：更改
文本（）中的内容
回调：


$（“#更改”）。在（“单击”，函数（）{
$（“span”）.text（函数（i，txt）{
返回{
“A”：“B”，
“B”：“C”，
“C”：“D”，
“D”：“A”
}[txt]；
});
});

A.
B
C
D
更改
如果查看，您将看到replaceAll（）的用法不正确

使用

此外，由于您希望通过单击来替换所有跨距，因此请去掉if-else
 我对你的代码做了一些修改，你可以看看

根据您的代码，您需要的是
.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(){
    $('#change').click(function(){
    $("span").text('your text');
    });
 });

如果要使用自定义文本单独更改每个span（在代码中，似乎要用下一个span的文本替换每个span的文本，但最后一个span取第一个span的文本除外），则应使用
.each（）遍历span
。无论跨距在页面中的位置如何，这都会起作用。如果您只想选择具有特定类的跨距，只需将
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 
    });
 });

也许您可以：

$(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;

                }
            })
        });
    });

像这样，您想单独更改每个跨距文本还是将所有文本更改为同一文本？无需逐一更改！您可以简单地使用
.text（function（idx，textContent）{}）
回调，因为
$（“span”）
已经是一个集合。为什么
每个
都可以执行
$（“span”）.text（function（i，text）{
没有
开关
（）
$('#changeText').click(function(){
    $("span").text("my text");
});

$('#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(){
    $('#change').click(function(){
    $("span").text('your text');
    });
 });

$(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 
    });
 });

$(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;

                }
            })
        });
    });

$('#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();
});