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');
});

DEMO #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');
});

按类名隐藏/显示多个div

3 个答案: