クラスidなしのjquery hide div

Question

私はimgsの数を持っています。私はそれが持つクラスが含まれていないことをdivを非表示にしたいと思います

：

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

は、私はまた、ダイブの数を持って、それをオフにする（0.3に不透明度を変更する）それらのいずれかをクリックしてくださいクリックされたimgと同じ "data-id"。 for instant - 2番目の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' 
     }); 
    } 
}); 

Answer 1

あなたはこの方法を行うことができます。

• はimgにclickイベントリスナーを追加します。
• data-idを$(this).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>

Answer 2

、このいずれかを試してみてください。

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