單擊按鈕可更改多個跨度項目

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()到parent：

 $("#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>內容map到內容數組中
• 修改數組
• 最后將修改后的數組發送到每個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（）方法循環所有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/

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

如果您查看文檔 ，您將看到您對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');
   }
 });
});

更新了小提琴

Answer 8

您的問題不是很清楚。如果您想要使用相同的文本更改所有跨度的文本，您可以選擇所有跨度。就像這樣：

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

如果要使用自定義文本單獨更改每個范圍（在代碼中，您似乎將每個范圍的文本替換為下一個范圍的文本，除了最后一個采用第一個范圍的文本），您應該迭代通過跨越.each() 。無論跨度在頁面中的哪個位置都可以工作。如果你只想選擇具有某個類的span ，只需用span.yourclass替換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

也許你可以這樣做：

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

                }
            })
        });
    });

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