如何使用jQuery更改跨度文本

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); 但是nothig更改了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-符号/

Answer 3

问题（贷记@adeneo）：

在插补的选择器字符串中，jQuery将句点（完全是很好的ID字符）视为类名，因此类似"#my.cool.id"类的东西实际上会选择此元素：

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

不是这个：

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

解决方案：

为了避免这个问题，简单地逃避或更换周期与任何合法ID字符，这不是一个数字或一个句点或冒号（因为你usign它分裂）的ID你的价格部分，例如， 24X55 ， 24|55等都可以正常工作。