CODEWITHSUNDEEP
jquery
Roi
Roi

Reputation: 49

jquery hide div without class id

I have number of imgs. click on one of them turn it off (change the opacity to 0.3)

<div id="main_results">
    <img src="images/icon-ski.png" data-id="type7" class="img-checkbox" />
    <img src="images/icon-weekend.png" data-id="type4" class="img-checkbox" />
    <img src="images/icon-organized.png" data-id="type6" class="img-checkbox" />

    <div class="type4">....</div>
    <div class="type2">....</div>
    <div class="type3">....</div>
    <div class="type3">....</div>
    <div class="type4">....</div>
</div>

I also have number of dives:

I would like to hide the divs that that doesn't contain the class with the same "data-id" as the img that was clicked. for instant - when i click on the second img all the divs with class=type4 should be hidden.

$(".img-checkbox").click(function () {
    var img = $(this);

    if (img.prev().prop("checked")) {
        img.css({
            'opacity': '0.3'
        });
        alert (img.attr("data-id"));
    } else {
        img.css({
            'opacity': '1.0'
        });
    }
});

Upvotes: 1

Views: 57

Answers (2)

Kunal Patel
Kunal Patel

Reputation: 119

Please try this one.

$(".img-checkbox").click(function () {
    var img = $(this);
    if (img.prev().prop("checked")) {
        img.css({
            'opacity': '0.3'
        });
        alert (img.attr("data-id"));
    } else {
        img.css({
            'opacity': '1.0'
        });
    }
    
    //hide all div which is contain 'type4' and any class.
    $('.'+img.attr("data-id")).hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main_results">
    <img src="images/icon-ski.png" data-id="type7" class="img-checkbox" />
    <img src="images/icon-weekend.png" data-id="type4" class="img-checkbox" />
    <img src="images/icon-organized.png" data-id="type6" class="img-checkbox" />

    <div class="type4">..1..</div>
    <div class="type2">....</div>
    <div class="type3">....</div>
    <div class="type3">....</div>
    <div class="type4">..1..</div>
</div>

Upvotes: 0

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167172

You can do this way:

  • Add a click event listener to img.
  • Get the data-id using $(this).data("id") and prepend using ..
  • Hide the matching div and set the CSS of this to 0.3.

Snippet here:

$(function () {
  $("img").click(function () {
    $(this).css("opacity", 0.3);
    $("." + $(this).data("id")).hide();
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main_results">
  <img src="//placehold.it/100?text=type7" data-id="type7" class="img-checkbox" />
  <img src="//placehold.it/100?text=type4" data-id="type4" class="img-checkbox" />
  <img src="//placehold.it/100?text=type6" data-id="type6" class="img-checkbox" />

  <div class="type4">type4</div>
  <div class="type2">type2</div>
  <div class="type3">type3</div>
  <div class="type3">type3</div>
  <div class="type4">type4</div>
</div>

Upvotes: 2

Related Questions