jquery - 按类名隐藏/显示多个 div

Question

http://maximebichon.net/test.html

这是网站。我的问题很简单。正如您在页面上看到的，在菜单底部显示“fr / en”。显然，我想要某种法语/英语切换。由于它是一个手工编码的网站，我认为我可以添加一些简单的 jquery，当用户单击 fr 或 en 时，它会隐藏一个特定的类并显示另一个类。

这是我到目前为止使用的代码（在stackoverflow上找到）：

$(document).click(function() {
var toggleElements = $(".toggleMe");
$.each(toggleElements, function (key, value) {
   if (value.hasClass('hidden')) {
       value.removeClass('hidden');
       value.addClass('shown');
   } else {
       if (value.hasClass('shown')) {
           value.removeClass('shown');
           value.addClass('hidden');
       }
   }
});
});

这是css（很简单）

.hidden{
display: none;
}
.shown{
display: block;
}

你能告诉我有什么问题吗？为了切换语言，我应该在链接的 href 或类中添加什么？非常感谢 ！

Answer 1

为什么不直接使用 jQuery.toggleClass()方法，例如：

$(document).click(function () {
    var $toggleElements = $(".toggleMe");
    $toggleElements.toggleClass('hidden shown');
});

演示#1

Answer 2

假设您的逻辑是正确的，请尝试使用 $(value) 而不是 'value'

$(document).click(function() {
var toggleElements = $(".toggleMe");
$.each(toggleElements, function (key, value) {
   if ($(value).hasClass('hidden')) {
       $(value).removeClass('hidden');
       $(value).addClass('shown');
   } else {
       if ($(value).hasClass('shown')) {
           $(value).removeClass('shown');
           $(value).addClass('hidden');
       }
   }
});
});

Answer 3

它应该是

var $toggleElements = $(".toggleMe");  
$toggleElements.click(function () {
    $toggleElements.toggleClass('hidden shown');
});