ID を HTML 要素に動的に割り当てるコードがいくつかあります。
ユーザーが SELECT ボックスからさまざまなオプションを選択すると、この 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の両方を使用してみました。また、ラベルに .text の代わりに .html メソッドを使用してみました。しかし、それもうまくいきませんでした。
私が間違っているかもしれないことについてのアイデアはありますか?
ありがとう。
編集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