jquery - 更新标签的文本或 html 不起作用并且不会引发任何错误

Question

我有一些代码可以动态地将 ID 分配给 HTML 元素。

我编写了额外的代码，以在用户从选择框中选择不同选项时使用此 ID 属性来更改文本。

这是 HTML:

<DT>Contact Type</DT>
<DD>
<select name="contact_types"  id="contact_types" ><option  selected value="" ></option></select>
<P CLASS="descr"></P>
</DD>
<DT>change me dynamically</DT>
<DD>
<input class=" text" type="text"  name="contact_details"  value=""  id="contact_details" >
<P CLASS="descr"></P>
</DD>

以下代码用于在文档加载后立即查找相关标签并分配 ID:

  $(document).ready(function() {

        //find element that has generic text and assign an id.
        $('body :contains("change me dynamically")').contents().each(function () {
            var exp = /change me dynamically/;

            if (this.nodeValue && exp.test(this.nodeValue)) {

                var $parent = $(this).parent().attr('id', 'contactTypeLabel');
                $parent.text(function(_, text){
                   return  text.replace(exp, "Phone Number");
                }); 

            }
        });     

下面是尝试更改刚刚分配了 ID 的标签文本的代码:

        $("#contact_types").live("change",function()  {         
            var selectedtext = $("#contact_types option:selected").html();           
            selectedtext = selectedtext.toUpperCase();
            alert(selectedtext);
            switch(selectedtext)
            {
                    case 'EMAIL':
                        $('#contactTypeLabel').text("eMail Address:");
                        break;
                    case 'MOBILE PHONE':
                        $('#contactTypeLabel').text("Phone Number:");
                        break;
                    case 'VOICE MAIL':
                        $('#contactTypeLabel').text("Number / Extension:");
                        break;      
            }
        });
 });

当我测试这个逻辑时，标签不会改变，因为我从下拉框中选择不同的选项。 但我在控制台中也没有收到任何错误...... 我尝试过使用 IE 和 Firefox。 我还尝试使用 .html 方法而不是 .text 作为标签。但这也不起作用。

关于我可能做错了什么有什么想法吗？

谢谢。

编辑 1

当我输入:

$('#contactTypeLabel')

进入控制台，我收到以下文本:

>> $('#contactTypeLabel'); 
{
    0 : [object HTMLScriptElement],
    length : 1,
    context : [object Document],
    selector : "#contactTypeLabel",
    constructor : function(a,b){return new d.fn.init(a,b,g)},
    init : function(a,e,f){var g,i,j,k;if(!a)return this;if(a.nodeType){this.context=this[0]=a,this.length=1;return this}if(a==="body"&&!e&&c.body){this.context=c,this[0]=c.body,this.selector="body",this.length=1;return this}if(typeof a==="string"){g=h.exec(a);if(!,
    jquery : "1.5.2",
    size : function(){return this.length},
    toArray : function(){return C.call(this,0)},
    get : function(a){return a==null?this.toArray():a<0?this[this.length+a]:this[a]}
    ...
} 
Add to watch

编辑2

作为测试，我将分配 ID 的 jquery 更改为如下所示:

    //find element that has generic text and assign an id.
        $('body :contains("change me dynamically")').contents().each(function () {
            var exp = /change me dynamically/;

            if (this.nodeValue && exp.test(this.nodeValue)) {

                var $parent = $(this).parent().attr('id', 'contactTypeLabel');
                 $('#contactTypeLabel').text("Number / Extension:");
            }
        }); 

果然，它不起作用...... 那么也许 ID 没有被正确分配？？

编辑3

下拉列表由 ajax 调用填充，如下所示:

$.getJSON(
url = myurl,
function(data)    {

            sessionStorage.setItem("voicecontacttypes", data); //save as string data.
    data = $.parseJSON(data); 
        if (data !=null) {
            $.each(data, function(i) {
                  $('#contact_types')
                .append($("<option></option>")
                .attr("value",this.id)      

                                .text(this.description));
        }); //end .each                             
    }//end if
    }//end data
);//end getJSON

Answer 1

以下内容对我来说效果很好。我认为这是因为您在 select 中使用 .html 而不是 .text。

IE:var selectedtext = $("#contact_types option:selected").text(); 而不是 var selectedtext = $("#contact_types option:selected").html ();

演示:http://jsfiddle.net/abc123/jSfgn/3/

JS:

更改:

//find element that has generic text and assign an id.
    $('body :contains("change me dynamically")').contents().each(function () {
        var exp = /change me dynamically/;

        if (this.nodeValue && exp.test(this.nodeValue)) {

            var $parent = $(this).parent().attr('id', 'contactTypeLabel');
            $parent.text(function(_, text){
               return  text.replace(exp, "Phone Number");
            }); 

        }
    }); 

致:

//find element that has generic text and assign an id.
    $('body > DT :contains("change me dynamically")').contents().each(function () {
        var exp = /change me dynamically/;

        if (this.nodeValue && exp.test(this.nodeValue)) {

            var $parent = $(this).parent().attr('id', 'contactTypeLabel');
            $parent.text(function(_, text){
               return  text.replace(exp, "Phone Number");
            }); 

        }
    }); 

JS:

更改:

   $("#contact_types").live("change",function()  {         
        var selectedtext = $("#contact_types option:selected").html();           
        selectedtext = selectedtext.toUpperCase();
        alert(selectedtext);
        switch(selectedtext)
        {
                case 'EMAIL':
                    $('#contactTypeLabel').text("eMail Address:");
                    break;
                case 'MOBILE PHONE':
                    $('#contactTypeLabel').text("Phone Number:");
                    break;
                case 'VOICE MAIL':
                    $('#contactTypeLabel').text("Number / Extension:");
                    break;      
        }
    });
 });

收件人:

$("#contact_types").live("change", function () {
    var selectedtext = $("#contact_types option:selected").text();
    selectedtext = selectedtext.toUpperCase();
    alert(selectedtext);
    switch (selectedtext) {
        case 'EMAIL':
            $('#contactTypeLabel').text("eMail Address:");
            break;
        case 'MOBILE PHONE':
            $('#contactTypeLabel').text("Phone Number:");
            break;
        case 'VOICE MAIL':
            $('#contactTypeLabel').text("Number / Extension:");
            break;
    }
});

请将执行 Ajax 的 JS 更改为以下内容:

$.getJSON(url = myurl, function (data) {
    sessionStorage.setItem("voicecontacttypes", data); //save as string data.
    data = $.parseJSON(data);
    if (data != null) {
        var html = '';
        $.each(data, function (i) {                
                html = html + "<option value=\"" + this.id + "\">" + this.description + "</option>";
        }); //end .each                             
        $('#contact_types').html(html);
    } //end if
} //end data
); //end getJSON

原因:这使得紧密嵌套的 for 循环仅访问 DOM 1 次，而不是每个返回值访问 1 次，这会减慢很多浏览器的速度，如果有超过 1000 个选项可能会导致 IE 崩溃。