使用 Attribute="Value" jQuery 时的替代方案

Question

在单击按钮时，我试图隐藏所有并仅显示名称（attr）等于按钮 id 的 Div。 我知道如何通过 ID（但我需要显示多个元素并且它们不能具有相同的 ID）或 class（但我需要 class 来调用 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

您可以这样做：读取button的id属性，隐藏name与此id不匹配的所有div元素，并仅显示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 个名称，所以这里的解决方案仅针对没有匹配名称的 div但也有一个 class 名称以-cleaning结尾，仅针对这 5 个元素。 当然，如果还有其他名称以 -cleaning 结尾的-cleaning的 div 不应该作为目标，那么这将不起作用。

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

Answer 2

不确定您在哪里读到属性值不能是变量，但@mathias_h 已经清楚地证明了这一点以及如何做到这一点。

这是另一种方法：

$('.type-btn').click(function(){
    $('.bill-cleaning, .type-cleaning').hide()
    .filter((i,div) => $(div).attr('name') === this.id).show();
});

 $('.type-btn').click(function(){ $('.bill-cleaning, .type-cleaning').hide().filter((i,div) => $(div).attr('name') === this.id).show(); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/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>