單擊時刪除並替換附加

Question

我在jquery中添加了一個“字符串”，並希望將其刪除並添加一個新的“字符串”。

創建了一個簡單的標記來顯示

<a href="#">Test</a>
<button>remove</button>

var c = " closed";
var o = " open";
$("a").append(c);
$("button").click(function(){
 $("a").find(c).replaceWith(o);
  $("a").append(o);
});

http://codepen.io/denniswegereef/pen/KpOjpr

Answer 1

Jquery使用元素而不是文本。

var c = " closed";
var o = " open";
var el_c = $('<span>').text(c);
var el_o = $('<span>').text(o);
$("a").append(el_c);
$("button").click(function(){
    el_c.replaceWith(el_o);
});

Answer 2

您需要將字符串封裝到要更改的SPAN或DIV中，如下所示：

<a href="#">Test <span>closed</span></a>

使用此結構，您可以像這樣在A中更改SPAN的innerHTML：

$('a span').html(o);

要么：

$('a span').html(c);

Answer 3

你的整個可以替代

$("button").click(function() {
  ($("a span").text() === "open") ? $("a span ").text("close") : $("a span").text("open");
});

http://jsfiddle.net/5vpn82c0/3/

Answer 4

使用html()檢查此解決方案

 var c = " closed"; var o = " open"; var a = $('#anchor'); a.append(c); $('#btn').click(function(){ var txt = a.text(); var prefix = 'Test'; if(txt.indexOf(c) != -1) { a.html(prefix + o); } else if (txt.indexOf(o) != -1) { a.html(prefix + c); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <a id="anchor" href="#">Test</a> <button id="btn">remove</button> 

Answer 5

我想這支筆可以達到您想要達到的效果： http ： //codepen.io/anon/pen/zGgVzG

var c = " closed";
var o = " open";
$("a").append(c);
$("button").click(function(){
    $("a").text($("a").text().replace(c, o));
});

你不能使用jQuery的find（）和替換方法來替換文本。 這些工作在dom元素上，而不是字符串上。 使用文本函數設置鏈接的文本，並使用JavaScript的本機替換函數進行文本替換。 為了澄清，下面的代碼與上面的代碼相同，但可能更容易理解：

var c = " closed";
var o = " open";
$("a").append(c);
$("button").click(function(){
    var linkText = $("a").text();
    var replacedText = linkText.replace(c, o);
    $("a").text(replacedText);
});

Answer 6

用兩個不同的類創建兩個span。 命名為'close'和'open'。 然后是一面旗幟

var s_c = '<span class="close">close</span>';
var s_o = '<span class="open">open</span>';
var flag = 'c';
$("a").append(s_c);
$("button").click(function(){
    if(flag == 'c')
    {
        $("a").find('span').remove();
        $("a").append(s_o);
        flag = o;
    }
    if(flag == 'o')
    {
        $("a").find('span').remove();
        $("a").append(s_c);
        flag = c;
    }
});

記住這段代碼用於切換文本......！ 曾經一度接近開放...如果你只尋找一次，有人回答最重要的問題。 祝好運 ！