javascript - 使用单个 JavaScript 代码显示/隐藏多个跨度

Question

我有以下纯 JS 代码来显示/隐藏跨度:

jQuery(document).ready(function ($) {
$(".loginArea").hide();
$(".showLoginArea").click(function(){
    console.log('login');
    $(".loginArea").toggle();
});
    });

如果使用一次，html代码就可以工作，但我需要多次使用它:

<span class="showLoginArea">Login</span> <span class="loginArea">This is Login Area</span>

我需要在不为每个跨度类编写 JS 代码的情况下完成这项工作:

<span class="showLoginArea1">Login</span> <span class="loginArea1">This is Login Area</span>
<span class="showLoginArea2">Login</span> <span class="loginArea2">This is Login Area</span>
<span class="showLoginArea3">Login</span> <span class="loginArea3">This is Login Area</span>
...

Answer 1

要让代码对每个元素都以相同的方式工作，每个元素都需要以相同的方式构建:

<span class="showLoginArea">Login</span> <span class="loginArea">This is Login Area</span>
<span class="showLoginArea">Login</span> <span class="loginArea">This is Login Area</span>
<span class="showLoginArea">Login</span> <span class="loginArea">This is Login Area</span>
...

然后，您可以使用相对 DOM 导航在不更改 HTML 的情况下进行链接，这会给出:

jQuery(document).ready(function($) {
  $(".loginArea").hide();
  $(".showLoginArea").click(function() {
    $(this).next().toggle();
  });
});

span { display:block; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<span class="showLoginArea">Login</span> <span class="loginArea">This is Login Area 1</span>
<span class="showLoginArea">Login</span> <span class="loginArea">This is Login Area 2</span>
<span class="showLoginArea">Login</span> <span class="loginArea">This is Login Area 3</span>

请注意，.next() 非常脆弱，因为它必须是 DOM 中的下一个元素 - 如果您稍微更改布局，这将会中断，因此将您的 show+area 包装在div，给予:

jQuery(document).ready(function($) {
  $(".loginArea").hide();
  $(".showLoginArea").click(function() {
    $(this).closest("div").find(".loginArea").toggle();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div><span class="showLoginArea">Login</span> <span class="loginArea">This is Login Area 1</span></div>
<div><span class="showLoginArea">Login</span> <span class="loginArea">This is Login Area 2</span></div>
<div><span class="showLoginArea">Login</span> <span class="loginArea">This is Login Area 3</span></div>

如果您的两个元素(被单击的元素和显示的元素)位于完全不同的位置(例如选项卡栏和内容)，那么您可以使用数据属性链接它们:

jQuery(document).ready(function($) {
  $(".loginArea").hide();
  $(".showLoginArea").click(function() {
    var area = $(this).data("login");
    $(".loginArea").hide();
    $(`.loginArea[data-login="${area}"]`).show();
  });
});

span { display:block; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<span class="showLoginArea" data-login="1">Login</span> 
<span class="showLoginArea" data-login="2">Login</span> 
<span class="showLoginArea" data-login="3">Login</span> 

<hr/>

<span class="loginArea" data-login="1">This is Login Area 1</span>
<span class="loginArea" data-login="2">This is Login Area 2</span>
<span class="loginArea" data-login="3">This is Login Area 3</span>