经济jQuery码

Question

最后，我常常得到一些类似的、多次重复的jQuery代码块。例如：

$("#showdescription").on("click", function(){
    $('#description_sh').toggleClass("down");
    $("#hiddendescription").toggleClass("hidden");
  });
$("#showrooms").on("click", function(){
        $('#rooms_sh').toggleClass("down");
        $("#hiddenrooms").toggleClass("hidden");
  });
$("#showmeals").on("click", function(){
        $('#meals_sh').toggleClass("down");
        $("#hiddenmeals").toggleClass("hidden");
  });
$("#showout").on("click", function(){
        $('#out_sh').toggleClass("down");
        $("#hiddenout").toggleClass("hidden");
  });
$("#showreviews").on("click", function(){
        $('#reviews_sh').toggleClass("down");
        $("#hiddenreviews").toggleClass("hidden");
  });

我一直在试图找到一种方法将这些代码组合在一起，这样我就有可能将代码降到目前不超过20%的水平。不幸的是，到目前为止，我所有的努力都打破了这一切。我今天觉得很蠢。一定很容易，不是吗？

Answer 1

我需要看到更多的代码才能确定，但假设您要添加的类都遵循相同的html结构，并且在DOM中以相同的方式彼此接近。

你可以这样做：

保留所有唯一的Id和类，但是在每个可点击的元素中添加一个相同的类(#showdescription，#showdescription等等)。调用这个类，类似于“信息容器”或任何您喜欢的东西，但只需确保将这个类添加到您希望运行单击函数的每个元素中。

现在假设每个容器的HTML结构大致相同，您可以使用如下所示的.each函数：

$('.info-container').each(function (){

});

这将针对相同的类，但单独使用内部的" This“选择器。因此，不管在这里运行什么，都将只在单击的单个类上运行，即使有多个名称相同的类。

在这里，我们现在可以将click函数作为选择器使用"this“：

$('.info-container').each(function (){
    $(this).click(function () {
        //code here
    });
});

现在，在这个单击函数中，我们需要找到要将类添加到的元素。有多种方法可以做到这一点，但我最喜欢的方法是使用.sibling和.parent方法导航DOM树。现在，确保要添加的元素具有相同的类名，这样我们就可以将它们作为目标。例如“.隐藏容器”。

$('.info-container').each(function (){
    $(this).click(function () {
        $(this).children('.hidden-container').toggleClass('hidden');
    });
});

这个部分也很重要:如果html结构对每个容器不一样，那么使用.siblings或父程序将无法工作，因为它将返回不同的结果。在这种情况下，我们不会使用兄弟姐妹，孩子或父母。相反，我们将使用.find和.closest。.find将找到与'x‘类名最近的元素，但只从DOM树下降。就像这样：

$('.info-container').each(function (){
    $(this).click(function () {
        $(this).find('.hidden-container').toggleClass('hidden');
    });
});

.Closest将沿着DOM向上移动，从simmilar到.parent。阅读Jquery手册了解差异。

$('.info-container').each(function (){
    $(this).click(function () {
        $(this).closest('.hidden-container').toggleClass('hidden');
    });
});

您还可以通过组合.sibling、.closest、.children等来上下遍历DOM。

$('.info-container').each(function () {
    $(this).click(function () {
        $(this).children('classname').siblings('classname').children('classname').addClass('newClass');
    });
});

总之，这是一个很好的方法，当使用多个项目，在理论上，做同样的事情。确保它们都具有相同的HTML智能结构。确保它们都有非唯一的类，这样您就可以将它们都作为目标，而不是单独针对它们。

希望这有帮助，请随时发电子邮件给我: work@jpwebdev.com。我是全职工作，作为完整的堆栈网页开发，但始终有时间帮助！

亲切的问候

琼恩

Answer 2

可重用的方式而不会破坏您的方法：

var eventElements = [{
  target: '#showdescription',
  affected: ['#description_sh', '#hiddendescription']
}, {
  target: '#showrooms',
  affected: ['#rooms_sh', '#hiddenrooms']
}, {
  target: '#showmeals',
  affected: ['#meals_sh', '#hiddenmeals']
}, {
  target: '#showout',
  affected: ['#out_sh', '#hiddenout']
}, {
  target: '#showreviews',
  affected: ['#reviews_sh', '#hiddenreviews']
}];

eventElements.forEach(function (el) {
  $(el.target).on('click', function () {
    $(el.affected[0]).toggleClass("down");
    $(el.affected[1]).toggleClass("hidden");
  });
});