無法使用jquery替換h2標記中的內容

我正在嘗試一個相當簡單的事情。我想在用戶點擊它時替換h2標籤內的文本。我的代碼只是添加一個額外的h2元素，保持原來的內容。無法使用jquery替換h2標記中的內容

<?DOCTYPE HTML> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<script> 
$(document).ready(function(){ 

    var html = ""; 
    var value = "New Text " 
    $("#sample").click(function(){ 

     if(value == "Old Text"){ 
      value = "New Text"; 
     } else { 
      value ="Old Text"; 
    } 

    html += "<h2 id='target'>"+value+"</h2>"; 
    $("#target").html(html); 

    }); 
}); 
</script> 

</head> 
<body> 
<div id ="sample"> 
<h2 id = "target"> Change this Text </h2> 
</div> 
</body>

來源

2016-12-08 SCAPTAIN

沒錯，是的，它將新內容添加到元素中。換句話說，你在h2中插入「< h2 id ='target'>新文本</h2>」。

要插入僅文本「新文本」，所有你需要做的是

$("#target").html(value);

，而不是

$("#target").html(html);

來源

2016-12-08 15:53:12

試試這個：

var html = ""; 
var value = "New Text " 
$("#sample").click(function(){ 

    if (value == "Old Text") { 
     value = "New Text"; 
    } else { 
     value = "Old Text"; 
    } 

    html = "<h2 id='target'>"+value+"</h2>"; 
    $("#target").html(html); 

});

來源

2016-12-08 15:54:15

你可以這樣做：

$(function(){ 
 
    
 
    $('h2').on('click', function(e) { 
 
\t 
 
    if(!$(this).hasClass('changed')) { 
 
     
 
\t \t $(this).text("Text Changed!"); 
 
    \t \t $(this).addClass('changed'); 
 
\t } 
 
    
 
    }); 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<h2 class="">Click to change its text</h2>

希望這有助於！

來源

2016-12-08 15:57:23

您只需要更換h2的內容即可。您不需要創建另一個h2並添加到DOM。

$(document).ready(function() { 
 

 
    var html = ""; 
 
    var value = "New Text " 
 
    $("#sample").click(function() { 
 

 
    if (value == "Old Text") { 
 
     value = "New Text"; 
 
    } else { 
 
     value = "Old Text"; 
 
    } 
 

 
    $("#target").text(value); 
 
    }); 
 
});

<?DOCTYPE HTML> 
 

 
    <head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    </head> 
 

 
    <body> 
 
    <div id="sample"> 
 
     <h2 id="target"> Change this Text </h2> 
 
    </div> 
 
    </body>

來源

2016-12-08 15:57:45 ScanQR

如已經提到的，你最好使用 '價值' 在這裏;

$("#target").html(value);

此外，對於你知道你正在暗中詢問此通過使用+ =在這條線出現，可能是有用的;

html += "<h2 id='target'>"+value+"</h2>";

簡而言之+ =意味着添加一些東西到已有的東西的末尾，而不是取代它。

來源

2016-12-08 16:04:30 dave

我想更換一個H2標籤內的文本

使用jQuery的text()方法：

$(document).ready(function(){ 
 
    $('#target').click(function(){ 
 
     $(this).text('You clicked and I changed!'); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<h2 id="target">Click to change this Text...</h2>

來源

2016-12-08 16:12:56 Rounin

你也可以試試這個，沒有需要#sample，因爲你可以在任何ID /類上運行jquery Click功能。

<!DOCTYPE HTML> 
<html lang="en"> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<script> 
$(document).ready(function(){ 
var text = ['New Text', 'Old Text']; 
var i = -1; 

$("#target").click(function(){ 
    i++; if(i==2) { i = 0; } 
    $("#target").html(text[i]); 
    });  
}); 
</script> 
</head> 
<body> 
<h2 id = "target"> Change this Text </h2> 
</body> 
</html>

來源

2016-12-08 16:15:38 Dusan

無法使用jquery替換h2標記中的內容

回答

相關問題