如何使用属性来设置样式到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中的特定元素

回答

相关问题