如何根据选择的语言对品牌div进行排序？

Question

我需要实现以下内容:在页面顶部的语言变化，品牌div(条带与纸飞机)改变顺序，以显示该语言的网站首先。这将在一个wordpress网站上，并使用一个翻译插件。我有点不确定从哪里开始，我知道一点关于onclick事件的知识，但我的知识真的很有限。当前开发站点可在此处找到：http://atsreisen.eighty3.co.uk/de/

Answer 1

如果我完全理解，您需要将顶部的语言附加到品牌div。您可以通过在html中添加data-lang属性并在链接中添加ids来实现此目的。(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

Answer 2

如果你使用的是wordpress，你可以通过很多方式来实现。最简单的方法是修改wordpress主题标题(理想情况下是通过子主题)，并添加一个"if condition“来检测当前的wordpress语言，并相应地向正文中添加一个类；您可以使用wordpress的get_locale()函数来完成此操作。然后，您可能需要一些javascript，或者最好是jQuery，以获取品牌div，并根据body类对它们进行重新排序。