Question

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

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

和div（稍后我将更改为按钮）称为“更改”。

<div id="change">CHANGE</div>

有没有办法只需点击一下按钮就可以更改页面上所有跨页项目的文本？

我对JavaScript不太熟悉，到目前为止，我正在尝试使用此代码，但它似乎不起作用。

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

提前致谢！

Answer 1

简单示例：更改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中无关的位置），而是共享相同的className，您可以：

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(

Answer 2

好吧，如果你只想有条不紊地点击点击文字，你可以使用JQuery each() Method循环所有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');
                }            
        });        
    });
});

DEMO： http://jsfiddle.net/xpadzam8/

Answer 3

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

Answer 4

试试这个黑客

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

Answer 5

如果查看documentation，您会发现您对replaceAll（）的使用不正确。

使用repalceWith。

此外，由于您只需单击一下即可替换所有跨度，请删除if-else。

Answer 6

好吧，我对您的代码进行了一些更改，您可以查看JSFiddle

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

Answer 7

根据您的代码，您需要的是.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');
   }
 });
});

更新了fiddle

Answer 8

您的问题不是很明确。如果您想要使用相同的文本更改所有跨度的文本，您可以选择所有跨度。就像这样：

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

Answer 9

也许你可以这样做：

puts "Here\' a better bigger favorite number - #{number + 1}"

Answer 10

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

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

10 个答案: