CODEWITHSUNDEEP
javascriptjquery
igortp
igortp

Reputation: 179

Alternative when using Attribute="Value" jQuery

On the click of the button, I'm trying to hide all and show only Divs with the name (attr) equal to the id of the button. I know how to do that getting the elements by ID (but I need to show more than one element and they can't have the same ID), or by class (but I need the class to call the CSS). So, I was trying to call via attribute="value". If I change manually "div[name='residential']" between residential, commercial, and boat, I have the effect I need. Therefore, does anyone have an idea to help me? Probably it's simple but I'm beginning with JavaScript and 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>

Upvotes: 4

Views: 87

Answers (2)

matthias_h
matthias_h

Reputation: 11416

You could do it like this: Read the id attribute of the button, hide all div elements with a name not matching this id and show only the divs with a name equal to this 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>

Update: As this solution lead to problems because all other divs on the page got hidden as well as they don't have a name equal to the 3 names in question, here's a solution that only targets divs that don't have a matching name but also have a class name ending in -cleaning to target only these 5 elements. Of course this wouldn't work if there are other divs with a class name ending in -cleaning that should not be targeted.

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

Upvotes: 4

PeterKA
PeterKA

Reputation: 24638

Not sure where you read that the attribute value cannot be a variable, but @mathias_h has clearly demonstrated that and how it can be done.

Here's another approach:

$('.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>

Upvotes: 1

Related Questions