Альтернатива при использовании Attribute = "Value" jQuery - PullRequest
4 голосов
/ 29 апреля 2020

При нажатии кнопки я пытаюсь скрыть все и показать только элементы Div с именем (attr), равным идентификатору кнопки. Я знаю, как это сделать, получая элементы по идентификатору (но мне нужно показать более одного элемента, и они не могут иметь одинаковый идентификатор), или по классу (но мне нужен класс для вызова 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>

Ответы [ 2 ]

4 голосов
/ 29 апреля 2020

Вы можете сделать это следующим образом: прочитайте атрибут id button, скройте все div элементы с name, не соответствующими этому id, и покажите только div с равным name к этому id.

$('.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, которые не имеют совпадающего имени, но также имеют имя класса, оканчивающееся на -cleaning, чтобы предназначаться только для этих 5 элементов. Конечно, это не сработает, если есть другие div с именем класса, оканчивающимся на -cleaning, которые не должны быть нацелены.

 $('.type-btn').click(function(){
    let selected = $(this).attr("id");
    $("div[name!=" + selected + "][class$='-cleaning']").hide();
    $("div[name=" + selected + "]").show();
 });
1 голос
/ 29 апреля 2020

Не уверен, где вы читаете, что значение атрибута не может быть переменной, но @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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...