javascript - 使用属性 ="Value"jQuery 时的替代方案

Question

单击按钮时，我试图隐藏所有并仅显示名称(attr)等于按钮 id 的 Div。我知道如何通过 ID 获取元素(但我需要显示多个元素，并且它们不能具有相同的 ID)，或通过类获取元素(但我需要类来调用 CSS)。所以，我试图通过 attribute="value"进行调用。如果我在住宅、商业和船舶之间手动更改 "div[name='residential']"，我就会得到我需要的效果。因此，有人有想法可以帮助我吗？可能很简单，但我从 JavaScript 和 jQuery 开始。

$('.type-btn').click(function(){
    $('.bill-cleaning, .type-cleaning').hide();
    $("div[name='residential']").show();
});

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

<button id= "residential" class="type-btn">Residential</button>
<button id= "comercial" class="type-btn">Comercial</button>
<button id= "boat" class="type-btn">Boat</button>


<div name="residential" class="type-cleaning" style="display:none">Residential</div>
<div name="comercial" class="type-cleaning" style="display: none">Comercial</div>
<div name="boat" class="type-cleaning" style="display:none">Boat</div>

<div name="residential" class="bill-cleaning" style="display: none">Bill Residential</div>
<div name="boat" class="bill-cleaning" style="display: none">Bill Boat</div>

Answer 1

你可以这样做:读取按钮的id属性，隐藏所有具有name<的div元素 与此 id 不匹配，并且仅显示 name 等于此 id 的 div。

$('.type-btn').click(function(){
    let selected = $(this).attr("id");
    $("div[name!=" + selected + "]").hide();
    $("div[name=" + selected + "]").show();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="residential" class="type-btn">Residential</button>
<button id="comercial" class="type-btn">Comercial</button>
<button id="boat" class="type-btn">Boat</button>


<div name="residential" class="type-cleaning" style="display:none">Residential</div>
<div name="comercial" class="type-cleaning" style="display: none">Comercial</div>
<div name="boat" class="type-cleaning" style="display:none">Boat</div>

<div name="residential" class="bill-cleaning" style="display: none">Bill Residential</div>
<div name="boat" class="bill-cleaning" style="display: none">Bill Boat</div>

更新:由于此解决方案会导致问题，因为页面上的所有其他 div 都被隐藏，并且它们的名称不等于所讨论的 3 个名称，因此这里有一个解决方案，仅针对没有一个匹配的名称，但也有一个以 -cleaning 结尾的类名，以仅针对这 5 个元素。当然，如果存在其他类名以 -cleaning 结尾的 div 且不应作为目标，则此方法将不起作用。

 $('.type-btn').click(function(){
    let selected = $(this).attr("id");
    $("div[name!=" + selected + "][class$='-cleaning']").hide();
    $("div[name=" + selected + "]").show();
 });