Question

我正在尝试一个相当简单的事情。我想在用户点击它时替换h2标签内的文本。我的代码只是添加一个额外的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>

Answer 1

这是对的，是的，它将新内容添加到元素中。换句话说，您正在插入“＆lt; h2 id ='target'＆gt; New Text＆lt; / h2＆gt;”进入h2。

要仅插入文本“新文本”，您需要做的就是

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

而不是

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

Answer 2

试试这个：

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

});

Answer 3

你可以这样做：

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h2 class="">Click to change its text</h2>

＆＃13;

希望这有帮助！

Answer 4

您只需要替换h2的内容。您无需创建另一个h2并添加到DOM。

＆＃13;

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

＆＃13;

<?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>

＆＃13;

Answer 5

正如已经提到的，你最好使用＆＃39; value＆＃39;这里;

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

此外，对于您来说，通过在此行上使用+ =隐式要求实现这一点可能会有用;

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

简单来说，+ =意味着在已经存在的东西的末尾添加一些东西，而不是替换它。

Answer 6

我想替换h2标签内的文字

使用jQuery $(document).ready(function(){ $('#target').click(function(){ $(this).text('You clicked and I changed!'); }); });方法：

＆＃13;

<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>

＆＃13;

paypal.Button.render({

      env: 'sandbox', // Optional: specify 'sandbox' environment

      client: {
          sandbox: 'xxxxxxxxx',
          production: 'xxxxxxxxx'
      },

      payment: function() {

          var env    = this.props.env;
          var client = this.props.client;

          return paypal.rest.payment.create(env, client, {
              transactions: [
                  {
                      amount: { total: ($scope.qty * 19) + '.00' , currency: 'USD' },
                      item_list: {
                      items: [{
                          "name": "bag",
                          "quantity": $scope.qty,
                          "price": "19.00",
                          "currency": "USD"
                        }]
                    }
                  }
              ]
          });
      },

      commit: true, // Optional: show a 'Pay Now' button in the checkout flow

      onAuthorize: function(data, actions) {

          // Optional: display a confirmation page here

          return actions.payment.execute().then(function() {
              // Show a success page to the buyer
              console.log(data);
              //save data to db

          });
      }

  }, '#paypal-button');

＆＃13;

Answer 7

你也可以试试这个，不需要#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>

无法使用jquery替换h2标记中的内容

7 个答案: