Jquery show hide Div 部分的好解决方案答案

【问题标题】：Good Solution for Jquery show hide Div sectionJquery show hide Div 部分的好解决方案
【发布时间】：2019-01-22 09:30:56
【问题描述】：

我正在使用Jquery 根据页面上的用户交互显示 div 块的隐藏部分。

使用其他framework不是一个选项，页面交互大多类似于单页behavior。

目前我的 JS 代码充满了所有这些代码，我正在寻找可能的代码optimization 或任何其他方法来处理这种类型的scenario。提前致谢

我使用了toggleClass 或Jquery。：可见Jquery 功能。

   // New section
    $(document).on('click', '.sone_button_1', function () {
        $('.div_5').removeClass('hidden');
        $('.div_6').removeClass('hidden');
        $('.div_2').addClass('hidden');
        $('.div_1').addClass('hidden');
        $('.div_4').addClass('hidden');
    });
    // new section
    $(document).on('click', '.some_list_2', function () {
        $('.div_3').removeClass('hidden');
        $('.div_2').removeClass('hidden');
        $('.div_5').addClass('hidden');
    });

    // new section
    $(document).on('click', '.some_button_2', function () {
        $('.div_1').removeClass('hidden');
        $('.div_3').addClass('hidden');
        $('.div_4').addClass('hidden');
        $('.div_5').addClass('hidden');
    });
  ...

它按预期工作，但需要更多才能使其高效和可能的交互。

【问题讨论】：

您很可能通过通用类和 DOM 遍历来简化此操作。如果您可以发布您的 HTML，我们可以确认这一点并为您提供一些解决方案
您可以使用活动和非活动类来 div Demo link 每个分页通过隐藏和显示 div 实现相同的效果
当你点击一个按钮时，你可以为 body 元素分配一个类名，并添加一些 css 规则，根据该类隐藏你的 div。
提高效率的一种方法是不从文档中进行事件委托。您应该使用最近的静态父级。另外，为了减少您的代码重复次数，您可以执行$('.div_5, .div_6').removeClass('hidden');

标签： jquery html css single-page-application show

【解决方案1】：

您可以在 JQuery 中只使用 .hide() 和 .show() 并为属于一起的 div 使用一个类。

看起来很简单，你不必使用CSS代码。

/* 
 * All interaction happen in same PAGE, 
 */
// New section
$(document).on('click', '.some_button_1', function() {
  $('.hide-first').hide();
  $('.hide-second').show();
});

// new section
$(document).on('click', '.some_button_2', function() {
  $('.hide-first').show();
  $('.hide-second').hide();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="hide-first">Div-1.1</div>
<div class="hide-first">Div-1.2</div>
<div class="hide-first">Div-1.3</div>

<div class="hide-second">Div-2.1</div>
<div class="hide-second">Div-2.2</div>
<div class="hide-second">Div-2.3</div>

<button class="some_button_1">Hide First Show Second</button>

<button class="some_button_2">Show First Hide Second</button>

【讨论】：

我只是举了一个例子来说明它是如何工作的。它也可以用于some_list_2。 @Znaneswar 我也没有 html 代码，所以我自己做了。

【解决方案2】：

可能只是组织单击每个按钮/列表时发生的事情？这样可以避免您编写重复的代码并使其更加灵活：

let interact_mapping = {
    '.some_button_1': [
        ['.div_5', true],
        ['.div_6', true],
        ['.div_2', false],
        ['.div_1', false],
        ['.div_4', false],
    ],
    '.some_list_2': [
        ['.div_3', true],
        ['.div_2', true],
        ['.div_5', false],
    ],
    '.some_button_2': [
        ['.div_1', true],
        ['.div_3', false],
        ['.div_4', false],
        ['.div_5', false],
    ],
};

const $document = $(document);

Object.keys(interact_mapping).forEach(function(interact_selector) {
    let interact_targets = interact_mapping[interact_selector];
		
    $document.on('click', interact_selector, function() {
        for (let target_index = 0; target_index < interact_targets.length; target_index++) {
            let target = interact_targets[target_index];
            
            if (target[1]) {
                $(target[0]).removeClass('hidden');
            } else {
                $(target[0]).addClass('hidden')
            }
        }
    });
});

.hidden {
    visibility: hidden;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <button class="some_button_1">
    some button 1
  </button>
  <button class="some_list_2">
    some list 2
  </button>
  <button class="some_button_2">
    some button 2
  </button>
</div>
<div class="div_1">
  div 1
</div>
<div class="div_2">
  div 2
</div>
<div class="div_3">
  div 3
</div>
<div class="div_4">
  div 4
</div>
<div class="div_5">
  div 5
</div>
<div class="div_6">
  div 6
</div>

【讨论】：