jQueryの特定の要素にアトリビュートを使用してスタイルを設定する方法

Question

それぞれに画像要素を含むdivのグループを持つコンテナ要素が1つあります。同じイメージにスタイルを適用するにはどうしたらいいですか？同じコンテナ要素を持つ他の要素は適用しません。ここで

は、私がこれまで（HTML）持っているものである：ここでは

<div class="media_img_container">    
     <div class="col-xs-6 col-sm-4 col-md-3 thumb"> 
      <a class="thumbnail thumbnail_overlay_container" href="#"> 
       <img class="img-responsive" 
       src="http://placehold.it/400x300" alt="" 
       id="media_img_01"> 
       <div class="thumbnail_overlay"> 
       <div class="text"> 
        <i class="fa fa-plus fa-lg"></i 
       </div> 
       </div> 
       <button class="thumbnail_btn"> 
       <span class="thumbnail_btn-icon"></span> 
       </button> 
      </a> 
     </div> 

は私のCSSです：ここでは

.thumbnail_overlay_container .thumbnail_btn{ 
display: none; 
position: absolute; 
top: 0; 
right: 0; 
height: 24px; 
width: 24px; 
background-color: #0073aa; 
box-shadow: 0 0 0 1px #fff, 0 0 0 2px #0073aa; 
} 

は私のjQueryのです：

$(document).ready(function(){ 

var media_img_container = $('.media_img_container'); 

var media_images = media_img_container.find('img'); 

$('a').click(function(){ 
    var idAttr = $(this).find('img').attr('id'); 
    if(idAttr){ 
     $('.thumbnail_btn').css('display','block'); 
    } 
}) 

}）

Answer 1

質問はあまり簡単ではありませんが、属性、クラスを追加することでDOM要素を簡単にターゲットにすることができます。ために：

$('.media_img_container img[attribute]') // <img attribute class='... 
$('.media_img_container img.myClass')  // <img class='myClass' ... 
$('.media_img_container img:eq(0)')  // uses known structure 

あなたは画像をクリックすると、それにスタイルを適用したい場合：.media_img_container img[myAttr=somevalue]またはちょうど.media_img_container IMG [myAttr] `

：

$('#something').click(function() { $(this).attr('myAttr','somevalue' }); 

次に、CSSでこれをターゲットにでき