如何使用屬性來設置樣式到jQuery中的特定元素

我有一個容器元素和一組div，每個div都包含一個圖像元素。我如何才能將樣式應用於該圖像，而不是具有相同容器元素的其他元素？如何使用屬性來設置樣式到jQuery中的特定元素

這裏是我到目前爲止（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'); 
    } 
})

}）

來源

2017-08-04 Johnny G.

您正在獲取'media_images'和'idAttr'，但您對這些引用（？）不做任何處理。 –

我的目標是找到一種「程序化」的方式來影響只點擊元素的風格，而不是所有元素。我想爲此使用attr方法。問題出現在我點擊錨元素並出現所有縮略圖時。 –

這個問題不是很直接，但你可以通過添加一個屬性，一個類或通過使用該結構來構建您的優勢來輕鬆地定位任何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

如果你點擊圖片，並想將樣式應用到它：

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

然後在CSS中，你可以針對這一點：.media_img_container img[myAttr=somevalue]或只是.media_img_container IMG [myAttr]`

來源

2017-08-04 19:45:32 lucuma

甚至是'.media_img_container img'，因爲在容器中看起來沒有其他圖像。 –

是的，問題並不清楚，你顯然可以使用任何層次結構。雖然沒有'.img_container'類。 – lucuma

當我點擊錨元素並且樣式（即thumbnail_btn）適用於所有子元素時，問題就出現了。我想使用attr方法隻影響被點擊的那個方法。 –

如何使用屬性來設置樣式到jQuery中的特定元素

回答

相關問題