如何使用Jquery更改跨度中的文本

How to change text in span using Jquery

本文关键字：文本 何使用 Jquery      更新时间：2023-09-26

我对Ajax和JQuery还很陌生。当我在输入框中键入文本时，我试图更改范围的值，但没有任何作用（即范围中的值没有更改）。经过对StackOverflow的研究，我发现我应该使用JQuery的text()或html()来更改值，但它仍然没有更改。我不确定我哪里错了。以下是我的代码：

Html输入框：

<input class="amnt" id ="Red:XL:50:24.55" type="text">
<span id="50-Red-24.55">0(This text is not changing)</span>

这是我的JQuery。它首先执行Ajax（我省略了这一部分），然后在Ajax成功后，它应该更改我的span:的值

$( ".amnt" ).keyup(function() {
    var split = this.id.split(":");
    var color = split[0];
    var size = split[1];
    var ID = split[2];
    var price = split[3];
    $.ajax({    //create an ajax request to getData.php
        success: function(response){                  
            $("#"+ID+"-"+color+"-"+price).text(price);
        },
        error:function (xhr, ajaxOptions, thrownError){
         alert(thrownError);
        }
    });
});

我也尝试了$("#"+ID+"-"+color+"-"+price).html(price);而不是$("#"+ID+"-"+color+"-"+price).text(price);，但keyup没有什么变化。有人能解释一下我在这里做错了什么吗？

谢谢。

如果在代码中使用相对选择器，则会更好、更干净，而不是连接不同的项来创建Id字符串。

在您的消息跨度中添加一个css类，并将其包装在容器div中。此外，您可以将这些数据保留在HTML5数据属性中，而不是将数据保留在Id值中。

<div class="amtContainer">
  <input class="amnt" data-size="XL" data-price="24.55" type="text">
  <span class="amtMsg">0(This text is not changing)</span>
</div>

在脚本中，使用closest()方法获取对外部容器div的引用，然后使用find()方法获取消息跨度。

$( ".amnt" ).keyup(function() {
    var _this= $(this);
    var val=_this.val();
    var price=_this.data("price");
    $.ajax({    //create an ajax request to getData.php
        success: function(response){                  
           _this.closest(".amtContainer").find(".amtMsg").text(price);
        },
        error:function (xhr, ajaxOptions, thrownError){
         alert(thrownError);
        }
    });
});

首先创建连接变量的id。然后将.替换为''.，并使用修改后的id来选择span元素。然后使用.html()更改跨度中的文本。

您可以使用此函数从id字符串中转义css选择器字符

function jq( myid ) {
    return myid.replace( /(:|'.|'[|']|,)/g, "''$1" );
}

参考：https://learn.jquery.com/using-jquery-core/faq/how-do-i-select-an-element-by-an-id-that-has-characters-used-in-css-notation/

问题（归功于@adeneo）：

在插入的选择器字符串中，jQuery将句点（这是非常精细的ID字符）视为类名，因此类似"#my.cool.id"的东西实际上会选择这个元素：

<div id="my" class="cool id"></div>

而不是这个：

<div id="my.cool.id"></div>

解决方案：

为了避免这个问题，只需将ID价格部分的句点转义或替换为任何不是数字、句点或冒号的合法ID字符（因为您使用它进行拆分），例如24X55、24|55等都可以。

相关文章：