gpt4 book ai didi

javascript - 切换图片 onClick

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

我有一个很酷的 jQuery 正在使用 - 当我单击标题链接“文本 1”或“文本 2”时,它下方会出现一些文本。但是,除此之外,我还想更改点击时的关联图片

这可能吗?

因此单击链接会显示文本并将相关图像更改为 http://placehold.it/100x150 。它会总是更改为这个特定图像。

这是一个 JSFiddle 演示:http://jsfiddle.net/hbfbS/

<!DOCTYPE html>
<!--[if lt IE 7 ]><html dir="ltr" lang="en-US" class="no-js ie ie6 lte7 lte8 lte9"><![endif]-->
<!--[if IE 7 ]><html dir="ltr" lang="en-US" class="no-js ie ie7 lte7 lte8 lte9"><![endif]-->
<!--[if IE 8 ]><html dir="ltr" lang="en-US" class="no-js ie ie8 lte8 lte9"><![endif]-->
<!--[if IE 9 ]><html dir="ltr" lang="en-US" class="no-js ie ie9 lte9"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html dir="ltr" lang="en-US" class="no-js"><!--<![endif]-->
<head>
<meta charset="UTF-8" />
<title>News</title>

<!-- jQuery -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript">
function slideonlyone(thechosenone) {
$('.newboxes2').each(function(index) {
if ($(this).attr("id") == thechosenone) {
$(this).slideDown(200);
}
else {
$(this).slideUp(600);
}
});
}
</script>

<style type="text/css">
.newboxes2 { display: none;}
</style>

</head>

<body>

<div class="wrapper">

<div class="grid_4" style="float:left;width:300px">
<h2><a href="javascript:slideonlyone('newboxes1');" style="color:#455560!important;">Test 1</a></h2>
<h3 class="head"><img src="http://placehold.it/100x187" class="small" /></h3>
<div class="newboxes2" id="newboxes1">
<p> test 1 </p>
</div>
</div>

<div class="grid_4" style="float:left;width:300px">
<h2><a href="javascript:slideonlyone('newboxes2');" style="color:#455560!important;">Test 2</a></h2>
<h3 class="head"><img src="http://placehold.it/100x187" class="small" /></h3>
<div class="newboxes2" id="newboxes2">
<p>test 2 </p>
</div>
</div>

</div>

</body>

</html>

非常感谢对此的一些帮助。我敢肯定这很简单。

最佳答案

http://jsfiddle.net/hbfbS/1/

修改后的函数:

function slideonlyone(thechosenone) {
$('.newboxes2').each(function(index) {
if ($(this).attr("id") == thechosenone) {
jQuery(this).parent('.grid_4').children().find('img').attr('src', 'http://placehold.it/100x150');
$(this).slideDown(200);
}
else {
$(this).slideUp(600);
}
});
}

快速解释一下我所做的更改:

我添加了这一行,jQuery(this).parent('.grid_4').children().find('img').attr('src', 'http://placehold.it/100x150');

它的作用是获取当前被点击项目的父级。然后获取所有子项并在其中找到图像标签,然后使用新图像 url 更新属性“src”。

您可能希望更好地选择 img 元素,因为这当前会将父容器中的所有图像更改为新图像源。

关于javascript - 切换图片 onClick,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13877205/

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