Question

我是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更改。任何人都可以解释我在这里做错了吗？

感谢。

Answer 1

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

在邮件范围中添加一个css类，并将其包装在容器div中。此外，您可以将这些数据保留在HTML 5数据属性中，而不是将数据保留在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);
        }
    });
});

Answer 2

首先创建连接变量的 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/

Answer 3

问题（归功于@adeneo）：

在插值选择器字符串中，jQuery将句点（它们是非常精细的ID字符）视为类名，因此"#my.cool.id"之类的内容实际上会选择此元素：

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

而不是这一个：

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

解决方案：

要避免此问题，只需将ID的价格部分中的句点转义或替换为不是数字或句号或冒号的任何合法ID字符（因为您将其用于拆分），例如， 24X55，24|55等都可以正常使用。

如何使用Jquery更改span中的文本

3 个答案:

问题（归功于@adeneo）：

解决方案：