logo标签列表

点击一个按钮以更改多个span元素

javascriptjqueryhtmlcss
3

假设我有多个span项目，如下：

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

还有一个名为“change”的div（稍后我将更改为按钮）。

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

有没有办法用一个按钮点击来更改页面上所有的span项的文本？

我不是很熟悉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');
                }
            }
        });
    });
});

提前感谢！

像这样 https://jsfiddle.net/LeoLion/d4ewwqm5/ - Leo the lion
1
你想逐个更改每个span的文本还是将所有文本更改为相同的文本？ - Aurel
10个回答
3

简单示例：更改从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>

IF your span elements are grouped you could use .append() to 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>

如果您的 SPAN 元素没有被分组（DOM 中位置不相关），而是共享相同的 className，则可以执行以下操作：

  • 将您的 <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>

是的，在所有的例子中，您都可以点击并执行切换任意多次！
如果您不想要这样，请使用.one(而不是.on(

2

如果您只想在条件点击时更改文本，可以使用JQuery each() Method循环所有:

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/

不需要一个个处理！你可以简单地使用.text(function(idx, textContent){})回调函数，因为$("span")已经是一个集合了。 - Roko C. Buljan
1

你可以轻松地实现这一点，例如使用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;
    }
 });
});
为什么要使用 each，而不是使用 $("span").text(function(i,txt){ 呢？ - Roko C. Buljan
没有 switch 语句更加简洁（请参见我的答案编辑） - Roko C. Buljan
0

如果您查看文档, 您会发现您使用的replaceAll()是不正确的。

请使用replaceWith。

另外，由于您想要一次性替换所有的span，所以可以去掉if-else。

0
尝试这个 hack
 $('#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>

0

嗯，我在你的代码中做了一些更改，你可以看看JSFiddle

$('#changeText').click(function(){
    $("span").text("my text");
});
0
根据您的代码需要使用.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

0

你的问题不是很清楚。如果你想改变所有具有相同文本的 span 元素的文本，你可以选择所有的 span 元素。像这样：

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

0

也许你可以这样做：

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

                }
            })
        });
    });
0
$('#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();
});
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接