Почему IE не вызывает массив в моей функции jquery?

Question

Я использую вкладки jquery, однако информация, вызываемая на вкладках, поступает из массива, так как у меня также есть переключатель языка, поэтому имена вкладок и содержимое меняются в зависимости от выбранного языка.

Мой код работает во всех браузерах, кроме IE, где имена вкладок называются, а содержимое внутри вкладок - нет.

Это код для вкладок;

<script type="text/javascript">
$(document).ready(function() {

 //When loaded
 $(".tab_content").hide(); //Hide content
 $("ul.tabs li:first").addClass("active").show(); //Show tab one
 $(".tab_content:first").show(); //Show tab one content

 //On Click Event
 $("ul.tabs li").click(function() {

 $("ul.tabs li").removeClass("active"); //Remove any "active"
 $(this).addClass("active"); //Add "active" class to current tab
 $(".tab_content").hide(); //Hide all tab content

 var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
 $(activeTab).fadeIn(); //Fade in the active ID content
return false;
 });
});
</script> 

Это код для вызова контента на каждом языке;

<script type="text/javascript">  
        function getLanguageResources(){
    var fr = new Array(); var en = new Array(); 

en['greeting'] = "Hi!"; fr['greeting'] = "Salut!";


    var resources = new Array();
    resources['en'] = en;
    resources['fr'] = fr;


    return resources;
}


function changeLanguage(lang){
var langResources = getLanguageResources()[lang];

$("span[name='lbl']").each(function(i, elt){
    $(elt).text(langResources[$(elt).attr("caption")]);
});  

 $("p[name='lbl']").each(function(i, elt){
    $(elt).text(langResources[$(elt).attr("caption")]); 
  }); 

 $("a[name='lbl']").each(function(i, elt){
    $(elt).text(langResources[$(elt).attr("caption")]); 
  }); 
}

$(document).ready(function() {
$("input[name='languagebutton']").click(function() {
    changeLanguage($(this).val());
});

$(document).ready(
  changeLanguage("en"));

});

Я попытался изменить теги моего введенного текста, так как изначально имена вкладок не появлялись, когда я использовал теги, вкладки появлялись, но остальная часть содержимого не появлялась.

Заранее благодарю за любую помощь!

Answer 1

Я проверил ваш код, если моя реализация верна, все выглядит нормально, он работает в FF и IE.

Я изменил структуру массива, так как вы можете поместить все это в одно, нет необходимости в fr, en переменных и т. Д.

jQuery:
function getLanguageResources(){
    return {
        "fr":{
            'greeting':'Salut!',
            'hello':'Hello FR'
        },
        "en":{
            'greeting':'Hi!',
            'hello':'Hello EN'
        }
    }
}
function changeLanguage(lang){
var langResources = getLanguageResources()[lang];

$("span[name='lbl']").each(function(i, elt){
    $(elt).text(langResources[$(elt).attr("caption")]);
});

$("p[name='lbl']").each(function(i, elt){ $(elt).text(langResources[$(elt).attr("caption")]); });
$("a[name='lbl']").each(function(i, elt){ $(elt).text(langResources[$(elt).attr("caption")]); });
}

$(document).ready(function() {

 //When loaded
 $(".tab_content").hide(); //Hide content
 $("ul.tabs li:first").addClass("active").show(); //Show tab one
 $(".tab_content:first").show(); //Show tab one content

 //On Click Event
 $("ul.tabs li").click(function() {

 $("ul.tabs li").removeClass("active"); //Remove any "active"
 $(this).addClass("active"); //Add "active" class to current tab
 $(".tab_content").hide(); //Hide all tab content

 var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
 $(activeTab).fadeIn(); //Fade in the active ID content
return false;
 });


$("input[name='languagebutton']").click(function() {
    changeLanguage($(this).val());
});
changeLanguage("en");
});

И HTML, который я создал:

<ul class="tabs">
<li><a href="#tab1"><span name="lbl" caption="greeting"></span></a></li>
<li><a href="#tab2"><span name="lbl" caption="hello"></span></a></li>
<li><a href="#tab3"><span name="lbl" caption="greeting"></span></a></li>
<li><a href="#tab4"><span name="lbl" caption="hello"></span></a></li>
</ul>

<div class="tab_content" id="tab1">
    tab 1
    <p name="lbl" caption="greeting"></p>
</div>
<div class="tab_content" id="tab2">
    tab 2
    <p name="lbl" caption="hello"></p>
</div>
<div class="tab_content" id="tab3">
    tab 3
    <p name="lbl" caption="greeting"></p>
</div>
<div class="tab_content" id="tab4">
    tab 4
    <p name="lbl" caption="hello"></p>
</div>

<input type="button" name="languagebutton" value="en"/>
<input type="button" name="languagebutton" value="fr"/>

Это нормально работает для меня, вам, вероятно, следует использовать id вместо name, но работает нормально.

Если это не помогло, опубликуйте ваш html, jquery-код где-нибудь в Интернете.

Приветствия

G.