如何將單選按鈕值存儲爲變量

我試圖用html和javascript製作多語言網站。爲了選擇語言，我創建了三個單選框（值：en，de，fr）。應該顯示的單詞存儲在一個JavaScript對象中。如何將單選按鈕值存儲爲變量

下面是代碼：

$('#lang-setting').on('change', function() { 
var lang = $('input:checked', '#lang-setting').val(); 
console.log(lang); 
alert(lang); 
$('#latitude-n').html(lang.latitude); 
$('#longitude-n').html(lang.longitude); 
$('#accuracy-n').html(lang.accuracy); 
$('#words-n').html(lang.words); 
$('#map-n').html(lang.map); 
$('#test').html(de.test); 
});

警報（郎）我每次選擇一種語言時CONSOLE.LOG給出正確的語言。

但是：換句話說沒有改變。如果我用f.e替換'lang'，他們會這樣做。 'de'（見最後一行代碼）。

來源

2017-04-17 AndiLeni

lang是一個字符串，所以lang.latitude是不確定的。如果您在翻譯窗口中創建了一個名爲de的全局對象，則需要執行的操作是window [lang] .latitude，如果lang ==='de' – juvian

基本上是https：/ /stackoverflow.com/questions/4244896/dynamically-access-object-property-using-variable –

[動態訪問對象屬性使用變量]（http://stackoverflow.com/questions/4244896/dynamically-access-object -property-using-variable） – juvian

你命名郎變量是一個字符串，因爲你將其設置爲無線輸入的值，所以lang.latitude，lang.longitude，lang.accuracy，lang.words和lang.map都未定義。

我假設你有全局變量，如de設置自從你說de.test的作品。

將所有這些語言放到一個單獨的對象中，然後您可以通過該鍵或無線電輸入的值進行引用可能是最容易的。我還添加了一個變量，允許您選擇默認語言和將執行實際html更改的函數。

var translate = { 
    default: 'en', 
    en: { 
     latitude: 'latitude', 
     longitude: 'longitude', 
     accuracy: 'accuracy', 
     words: 'words', 
     map: 'map', 
    }, 
    de: { 
     latitude: '', 
     longitude: '', 
     accuracy: '', 
     words: '', 
     map: '', 
    }, 
    fr: { 
     latitude: '', 
     longitude: '', 
     accuracy: '', 
     words: '', 
     map: '', 
    }, 
    changeText: function(lang) { 
     $('#latitude-n').html(translate[lang].latitude); 
     $('#longitude-n').html(translate[lang].longitude); 
     $('#accuracy-n').html(translate[lang].accuracy); 
     $('#words-n').html(translate[lang].words); 
     $('#map-n').html(translate[lang].map); 
    } 
}

既然你不發表您的三個單選按鈕的HTML，我要去，而不是給他們的名字，而不是屬性的值爲「郎設置」標識的，因爲有重複的ID是無效的HTML 。以下是這些單選按鈕的最小HTML。

<input name="lang-setting" value="en" type="radio" /> 
<input name="lang-setting" value="de" type="radio" /> 
<input name="lang-setting" value="fr" type="radio" />

然後你聽衆，我已經關掉它來聽「點擊」，而不是改變，因爲單選按鈕的值實際上沒有改變，他們住，因爲「en」，「 de「和」fr「。我還在文檔中添加了函數調用，以便在頁面加載時運行默認語言選擇。

$('input[name="lang-setting"]').on('click', function(e){ 
    var lang = $(this).val(); 
    translate.changeText(lang); 
}); 
$(document).ready(function(){ 
    translate.changeText(translate.default); 
});

這裏有一個working demo of it on JSFiddle

來源

2017-04-17 17:36:13 Tessa

這是最好的回答。 – Lewis

我真的很喜歡你的解決方案。不幸的是，它給了我這個錯誤信息：無法讀取未定義的屬性「緯度」 – AndiLeni

您是否創建了對象的「翻譯」變量？在控制檯中，你應該能夠輸入「translate.de.latitude」，它應該給你任何你所做的價值。我不懂德語或法語，所以我只是將它們留爲空字符串，但我想你已經在代碼中將這些值複製/粘貼到它中。 – Tessa

它不工作，你需要括號符號。

var words = { 
 
    de: { 
 
    lat: "Breitengrad", 
 
    lon: "Längengrad" 
 
    }, 
 
    en: { 
 
    lat: "Latitude", 
 
    lon: "Longitude" 
 
    }, 
 
    fr: {} 
 
}; 
 

 
function changeLanguage() { 
 
    var lang = $('#lang-setting input:checked').val(); 
 
    $('#latitude-n').html(words[lang].lat); 
 
} 
 

 
$('#lang-setting input').click(changeLanguage); 
 
changeLanguage();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="lang-setting"> 
 
    <input type="radio" value="en" name="lang" checked>En</option> 
 
    <input type="radio" value="de" name="lang">De</option> 
 
    <input type="radio" value="fr" name="lang">Fr</option> 
 
</div> 
 
<p> 
 
    <span id="latitude-n"></span>: <input /> 
 
</p>

來源

2017-04-17 17:25:27

如何將單選按鈕值存儲爲變量

回答

相關問題