我如何根据所选语言订购品牌div?

时间:2016-07-24 13:43:47

标签: javascript jquery html css wordpress

我需要实现以下目标: 在页面顶部更改语言时,品牌div(带有纸飞机的条带)会更改顺序以显示首先使用该语言的网站。这将在wordpress网站上并使用翻译插件。我有点不确定从哪里开始,我对onclick事件有一点了解,但我的知识非常有限。可以在此处找到当前的开发站点:http://atsreisen.eighty3.co.uk/de/

2 个答案:

答案 0 :(得分:0)

如果您使用的是wordpress,则可以通过多种方式实现此目的。最简单的方法是修改wordpress主题标题(理想情况下通过子主题),并添加“if条件”来检测当前的wordpress语言并相应地向主体添加一个类;你可以使用wordpress get_locale()函数来完成它。然后你可能需要一个小的javascript,或理想的jQuery,来获得品牌div并重新排序他们的身体类。

答案 1 :(得分:0)

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