gpt4 book ai didi

javascript - 如何在多个 html 元素上重复相同的 Javascript 代码

转载 作者:行者123 更新时间:2023-11-30 17:58:05 24 4
gpt4 key购买 nike

注意:更改代码,使图像和文本成为链接。

基本上,我有 3 张图片都具有相同的类别,不同的 ID。我有一个 javascript 代码,我想将其应用于所有三张图片,除了代码需要根据图片略有不同。这是 html:

<div class=column1of4>
<a href="images/watermark_pic1.jpg"><img src="images/actual.jpg" id="first"></a>
<a href="images/watermark_pic1.jpg"><div id="firsttext" class="spanlink"><p>lots of text</p></div></a>
</div>

<div class=column1of4>
<a href="images/watermark_pic1.jpg"><img src="images/fake.jpg" id="second"></a>
<a href="images/watermark_pic1.jpg"><div id="moretext" class="spanlink"><p>more text</p></div></a>
</div>

<div class=column1of4>
<a href="images/watermark_pic1.jpg"><img src="images/real.jpg" id="eighth"></a>
<a href="images/watermark_pic1.jpg"><div id="evenmoretext" class="spanlink"><p>even more text</p></div></a>
</div>

这是 id="firsttext"的 Javascript:

$('#firstextt').hide();
$('#first, #firsttext').hover(function(){
//in
$('#firsttext').show();

},function(){
//out
$('#firsttext').hide();
});

因此,当用户将鼠标悬停在#first 上时,#firsttext 将出现。然后,我想要它,以便当用户将鼠标悬停在#second 上时,#moretext 应该出现,等等。

我用 Python 完成了编程,我创建了一个 sudo 代码,基本上就是这样。

text = [#firsttext, #moretext, #evenmoretext]
picture = [#first, #second, #eighth]

for number in range.len(text) //over here, basically find out how many elements are in text


$('text[number]').hide();
$('text[number], picture[number]').hover(function(){
//in
$('text[number]').show();

},function(){
//out
$('text[number]').hide();
});

语法可能有偏差,但这只是 sudo 代码。任何人都可以帮助我为它制作实际的 Javascript 代码吗?

最佳答案

试试这个

$(".column1of4").hover(function(){
$(".spanlink").hide();
$(this).find(".spanlink").show();
});

关于javascript - 如何在多个 html 元素上重复相同的 Javascript 代码,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17712230/

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