我需要实现以下目标: 在页面顶部更改语言时,品牌 div(带有纸飞机的 strip )更改顺序以首先显示使用该语言的网站。这将在 wordpress 网站上并使用翻译插件。我有点不确定从哪里开始,我对 onclick 事件了解一点,但我的知识真的很有限。当前的开发站点可以在这里找到:http://atsreisen.eighty3.co.uk/de/
最佳答案
如果我能完全理解,您需要将顶部的语言附加到品牌 div。您可以通过在您的 html 中添加 data-lang 属性并将 id 添加到您的链接来做到这一点。 (data-something) 是一种创建自定义属性以在 jQuery 中使用的方法。
<a class="lang" href="#0" id="german">German</a>
<a class="lang" href="#0" id="english">English</a>
<div id="container">
<div data-lang="german">This is a brand div</div>
<div data-lang="english">This is another brand div</div>
<div data-lang="english">This is an English brand div</div>
</div>
然后在 jQuery 中你可以这样做:
//variables (caching)
var langLink = $('.lang');
var langId;
var dataLang;
langLink.on('click', function(event) {
// this part to prevent the page from refreshing when the link is clicked
event.preventDefault();
// get the clicked links Ids, hence $(this)
langId = $(this).attr('id');
// go up to a parent the links and divs share here it's the body
// then finding the divs that has data-lang matching the links id
dataLang = $(this).parent('body').find('div[data-lang="' + langId + '"]');
// a temporary storage to store all the divs that match the language clicked
var temp = [];
// pushing the found divs to the temp storage
temp.push(dataLang);
// removing them from the dom
dataLang.remove();
// and finally looping through the temp storage array and prepending it to the container
for (var i = 0; i < temp.length; i++) {
$('#container').prepend(temp[i]);
}
});
这就是我要做的,但我相信还有其他方法可以做到这一点。 如果你想看到它的实际效果,试试这个 JSFiddle
关于javascript - 我将如何根据所选语言订购品牌 div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38552669/