通過單擊跨度替換div中的段落中的文本

Question

我想通過單擊頁面底部的假“鏈接”（跨度）來將一段文本更改為其他文本。

我到目前為止所擁有的

<body>
  <p> here is a paragraph that i would like to change once the span below me is clicked </p> 
  <span id="click"> click me for the text above me to change </span>
  </center> 
</body>
<script>
  $( "click" ).click(function() {
    $( "p" ).replaceWith( "new paragraph" );
  });
</script>

我真的是jquery和javascript的新手，所以將不勝感激！ 謝謝。

Answer 1

第一：要使用ID，請使用＃

第二個：要獲取上一個元素，請使用.prev() .. $(this).prev('p')

<script>
$( "#click" ).click(function() {
    $(this).prev( "p" ).replaceWith( "<p>new paragraph</p>" );
});
</script>

注意：id必須是唯一的，因此不要對多個元素使用相同的id，因此請嘗試使用class代替<span class="click"> ，然后使用$('.click')代替$('#click')

第三：您的代碼中</center>應該做什么？

第四：您應該檢查是否包含jquery

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

第五：在關閉正文標簽之前放置腳本

完整的代碼

<body>
  <p> here is a paragraph that i would like to change once the span below me is clicked </p> 
  <span id="click"> click me for the text above me to change </span>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
 $(docuemt).ready(function(){
  $( "#click" ).click(function() {
    $(this).prev( "p" ).replaceWith( "<p>new paragraph</p>" );
  });
 });
</script>
</body>

把img而不是段落使用

$(this).prev( "p" ).replaceWith('<img src="http://placehold.it/350x150">');

將img放在段落中

$(this).prev( "p" ).html( 'new paragraph<img src="http://placehold.it/350x150">' );

Answer 2

$( "click" )應該是$( "#click" )

Answer 3

實際上，您不需要replaceWith() 。 您可以只使用text()更改文本。

$( "#click" ).click(function() {
    $( "p" ).text( "new paragraph");
  });

通過單擊跨度替換div中的段落中的文本

問題描述

3 個解決方案

解決方案1
1 已采納 2015-12-01 20:24:26

解決方案2
0 2015-12-01 20:23:38

解決方案3
0 2015-12-01 20:49:37

通過單擊跨度替換div中的段落中的文本

問題描述

3 個解決方案

解決方案1 1 已采納 2015-12-01 20:24:26

解決方案2 0 2015-12-01 20:23:38

解決方案3 0 2015-12-01 20:49:37

解決方案1
1 已采納 2015-12-01 20:24:26

解決方案2
0 2015-12-01 20:23:38

解決方案3
0 2015-12-01 20:49:37