2017-07-10 103 views
1

我有一些imgs。點擊其中一個將其關閉(改變不透明度爲0.3)jquery hide div沒有class id

<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> 

我也有潛水數:

我想隱藏的div是不包含與類與被點擊的img相同的「data-id」。 瞬間 - 當我點擊第二個img時,應該隱藏所有class = type4的div。

$(".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' 
     }); 
    } 
}); 

回答

2

你可以這樣說:

  • 添加點擊事件監聽器img
  • 使用$(this).data("id")獲取data-id,並使用.前置。
  • 隱藏匹配的div並將this的CSS設置爲0.3

片段在這裏:

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

0

請嘗試這一個。

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

+0

尼斯一個...':)' –