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

<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>
...

然后使用 relative DOM navigation 在之间进行链接-无需更改HTML，这将得到：
x一个一个一个一个x一个一个二个一个x一个一个三个一个
请注意，.next()非常脆弱，因为它必须是DOM中的下一个元素--如果稍微更改布局，它就会崩溃，因此请将show+区域 Package 在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>