gpt4 book ai didi

javascript - 使用 jQuery 定位非唯一 HTML 元素

转载 作者:行者123 更新时间:2023-12-02 18:23:37 24 4
gpt4 key购买 nike

我想将 JS 淡入/淡出应用到没有唯一 ID 或类的 HTML 元素。

<div class="view-content">
<table class="views-view-grid cols-3">

<tbody>
<tr class="row-1 row-first row-last">
<td class="col-1 col-first views-portals-row">

<div class="views-field views-field-title"> <h1 class="field-content view_portals_title"><a href="http://dev.test.eu/content/hydrography">Hydrography</a></h1> </div>
<div class="views-field views-field-field-attribution"> <div class="field-content view_portals_attr" style="display: none;"></div> </div>
<div class="views-field views-field-field-image-portal"> <div class="field-content view_portals_img"><a href="http://dev.test.eu/content/hydrography"><img width="261" height="200" alt="" src="http://dev.test.eu/sites/test.eu/files/public/hydrography.jpg" typeof="foaf:Image"></a></div> </div>
<div class="views-field views-field-body"> <div class="field-content view_portals_desc"><p>Data on bathymetry&nbsp;(water depth), coastlines, and geographical location of underwater features:&nbsp;wrecks.</p>
<p><a href="http://dev.test.eu/content/hydrography" class="button small">Read more</a></p>
</div> </div> </td>
<td class="col-2 views-portals-row">

<div class="views-field views-field-title"> <h1 class="field-content view_portals_title"><a href="http://dev.test.eu/content/geology">Geology</a></h1> </div>
<div class="views-field views-field-field-attribution"> <div class="field-content view_portals_attr" style="display: none;"></div> </div>
<div class="views-field views-field-field-image-portal"> <div class="field-content view_portals_img"><a href="http://dev.test.eu/content/geology"><img width="299" height="200" alt="" src="http://dev.test.eu/sites/test.eu/files/public/geology.png" typeof="foaf:Image"></a></div> </div>
<div class="views-field views-field-body"> <div class="field-content view_portals_desc"><p>Data on seabed substrate, sea-floor geology, coastal behaviour, geological events and probabilities, and minerals.</p>
<p><a href="http://dev.test.eu/content/geology" class="button small">Read more</a></p>
</div> </div> </td>
<td class="col-3 col-last views-portals-row">

<div class="views-field views-field-title"> <h1 class="field-content view_portals_title"><a href="http://dev.test.eu/content/seabed-habitats-0">Seabed Habitats</a></h1> </div>
<div class="views-field views-field-field-attribution"> <div class="field-content view_portals_attr" style="display: none;">Posidonia oceanica, &copy; David Balata</div> </div>
<div class="views-field views-field-field-image-portal"> <div class="field-content view_portals_img"><a href="http://dev.test.eu/content/seabed-habitats-0"><img width="267" height="200" alt="" src="http://dev.test.eu/sites/test.eu/files/public/Posidonia%20oceanica_2.jpg" typeof="foaf:Image"></a></div> </div>
<div class="views-field views-field-body"> <div class="field-content view_portals_desc"><p>Data on modelled seabed habitats based on seadbed substrate, energy , biological zone, and&nbsp;salinity.</p>
<p><a href="http://dev.test.eu/content/seabed-habitats-0" class="button small">Read more</a></p>
</div> </div> </td>
</tr>
</tbody>
</table>
</div>

我使用以下脚本来隐藏和显示图片的属性:

(function ($) {
$(document).ready(function() {
$('.view_portals_attr').hide();
$('.views-portals-row').hover(function() {
$('.view_portals_attr').fadeIn();
}, function() {
$('.view_portals_attr').fadeOut();
});
});
})(jQuery);

问题是,将鼠标悬停在列表中的任何图片上时,都会显示所有属性。有人可以告诉我如何一次瞄准一个目标吗?

最佳答案

您需要的是仅选择子项,如下所示:

(function ($) {
$(document).ready(function() {
$('.view_portals_attr').hide();
$('.views-portals-row').hover(function() {
$(this).find('.view_portals_attr').fadeIn();
}, function() {
$(this).find('.view_portals_attr').fadeOut();
});
});
})(jQuery);

查看演示:http://jsfiddle.net/SVxKx/

关于javascript - 使用 jQuery 定位非唯一 HTML 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18594893/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com