jquery - 在 div MouseOver 上的多个 div 中选择 img

Question

我有许多<div>彼此分开的标签。他们都有这样的布局：

<div class="swatchimgouter">
    <div class="swatchimginner">
        <img src="myimage.jpg" alt="Green"/>
    </div>
</div>

<div class="swatchimgouter">
    <div class="swatchimginner">
        <img src="myimage.jpg" alt="Black"/>
    </div>
</div>

<div class="swatchimgouter">
    <div class="swatchimginner">
        <img src="myimage.jpg" alt="Red"/>
    </div>
</div>

<div class="swatchimgouter">
    <div class="swatchimginner">
        <img src="myimage.jpg" alt="White"/>
    </div>
</div>

我想获取div 悬停时的"alt"属性。悬停时此事件触发良好：<img>swatchimgouter

$("#variations div.swatchimgouter").mouseover(function () {

}

我尝试了许多选择器的组合，但没有一个可以让我访问<img>属性。由于这些div标签中有许多带有 swatchimgouter 类，而我想要的是触发上述鼠标悬停事件的标签，我是否使用this某种方式来获取 img？就像是：

var previewColor = $('div.swatchimginner img', this).attr('alt');

Answer 1

试试这个，

现场演示

$("#variations div.swatchimgouter").mouseover(function () {

    var previewColor = $('img', this).attr('alt');    

});

Answer 2

我不确定您尝试了什么，但您的示例或多或少对我有用：

$("#variations div.swatchimgouter").mouseover(function () {
    var previewColor = $('img', this).attr('alt');
    alert(previewColor);
});

演示：http: //jsfiddle.net/JtQfh/

Answer 3

var myAlt = $('img').attr("alt");

或者，如果您有很多图像：

var myAlt = $('div.swatchimginner img').attr("alt");

最快的方法是为您的 img 元素提供一个 id，然后通过它进行选择。

Answer 4

$(document).ready(function () {
        $('#h').mouseover(function() { 
        var s = $('#in img').attr('alt');
        alert(s);
    });
    });