javascript - 多种JQuery点击功能

Question

假设我想要以下 10-20 个 div。如何将 jQuery 代码合并为一位，这样我就不必复制它？

<div class="one">
    <h2>Test</h2>
</div>

<div class="one_new">
    <h2>Test</h2>
</div>

<div class="two">
    <h2>Test</h2>
</div>

<div class="two_new">
    <h2>Test</h2>
</div>

$(function() {
    $('.one').click(function() {
    $('.one').css( "display", "none")
    $('.one_new').css( "display", "table");
  });
});

$(function() {
    $('.two').click(function() {
    $('.two').css( "display", "none")
    $('.two_new').css( "display", "table");
  });
});

更新:https://jsfiddle.net/d9x45nyd/12/

Answer 1

您要解决的基本问题是如何关联元素(在您的情况下为 div)，以便当单击一个元素时，会显示相关元素并隐藏原始元素。

有多种方法可以做到这一点:

• 基于层次结构(即查找下一个 div)
• 选择器数组(很难用 HTML 维护)
• 每个项目一个处理程序(您的原始版本，但扩展性不佳)

在大多数情况下，我个人的建议是“数据驱动”HTML。也就是说，HTML 被编写为包含足够的元数据，以允许通过相对简单的代码做出决策。这使得所有维护工作，例如对于新元素，以及元素本身。

数据驱动的一种简单方法是在元素上使用 data- 属性，例如保存相关元素的选择器。

例如这是一个解释性示例(因此不是所需的最低代码):

HTML:

<div class="one" data-target=".one_new">
     <h2>Test one</h2>
</div>
<div class="one_new" style="display:none;">
     <h2>Test one new</h2>
</div>
<div class="two" data-target=".two_new">
     <h2>Test two</h2>
</div>
<div class="two_new" style="display:none;">
     <h2>Test two new</h2>
</div>

jQuery

$(document).on('click', 'div', function () {
    // Only bother to wrap this once - common practice
    var $this = $(this);
    // Get the data-target element from the div clicked
    var target = $this.data('target');
    // If it has a target...
    if (target) {
        // use it as a jQuery selector to select the matching div 
        $(target).css('display', 'table');
        $this.hide();
    }
});

JSFiddle: http://jsfiddle.net/TrueBlueAussie/mkLqvrrm/2/

此方法使用单个委托(delegate)事件处理程序，附加到不更改的祖先元素。如果没有其他更接近/方便的方法，document 是最好的默认值。它的工作原理是监听事件(即click)以冒泡到祖先。然后它仅将 jQuery 选择器应用于气泡链中的元素。然后它仅将该函数应用于引发事件的匹配元素。

此方法的连接效率非常高，并且在事件发生时的运行时开销可以忽略不计(因为与直接连接的事件处理程序相比，您无法足够快地单击鼠标来注意到任何差异)。