我有这段代码:
function swap(id1, id2, id3, id4) {
$("#" + id1).fadeOut(500);
$("#" + id2).fadeOut(500);
$("#" + id3).fadeOut(500, function () {
document.getElementById(id1).src = document.getElementById(id2).src;
document.getElementById(id3).innerHTML = document.getElementById(id4).innerHTML;
});
$("#" + id1).fadeIn(500);
$("#" + id2).fadeIn(500);
$("#" + id3).fadeIn(500);
$(document).ready(function () {
$("html, body").animate({scrollTop: 0}, 600);
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="active" data-related="person1">
<div class="content-overlay" onclick="swap('img0', 'img1', 'desc0', 'desc1')"></div>
<img src="https://wallpaperbrowse.com/media/images/eiffel-tower-wallpaper-18.jpg" id="img1" class="newsImage"/>
<div class="content-details fadeIn-bottom" onclick="swap('img0', 'img1', 'desc0', 'desc1')">
<h3 class="content-title">This is a title</h3>
<p class="content-text">This is a short description</p>
</div>
</a>
<div class="no-display" id="desc1">
<div class="gathering">
<span class="gatheringTitle">gathering 2017</span>
<div class="gatheringDate">
<span class="datee">Tue 7, Dec 2017</span>
</div>
<div class="gath">
<p class="text-justify gatheringText">Lorem ipsum dolor sit amet, consectetur adipiscing
elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco
laboris nisi ut aliquip ex ea commodo cons. ullamco
laboris nisi ut aliquip ex ea commodo cons.</p>
</div>
</div>
</div>
<a href="#" class="active" data-related="person1">
<div class="content-overlay" onclick="swap('img0', 'img1', 'desc0', 'desc1')"></div>
<img src="https://wallpaperbrowse.com/media/images/Pattern-1920X1200-Wallpaper-Widescreen_318iyIu.jpg" id="img2" class="newsImage"/>
<div class="content-details fadeIn-bottom" onclick="swap('img0', 'img2', 'desc0', 'desc2')">
<h3 class="content-title">This is a title</h3>
<p class="content-text">This is a short description</p>
</div>
</a>
</div>
<div class="no-display" id="desc2">
<div class="gathering">
<span class="gatheringTitle">gathering 2017</span>
<div class="gatheringDate">
<span class="datee">Tue 8, Dec 2017</span>
</div>
<div class="gath">
<p class="text-justify gatheringText">Lorem ipsum dolor sit amet, consectetur
adipiscing
elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation
ullamco
laboris nisi ut aliquip ex ea commodo cons.</p>
</div>
</div>
</div>
</li>
点击我需要将图像更改为另一个图像,所以我使用javascript也做了这个包含描述的div,这是我怎么做但仍然无法正常工作
当我点击它时,图像会发生变化,但在检查时会显示div class=""gathering
两次,带有标签索引值我只想删除它并显示一次... anu idea? thx提前
答案 0 :(得分:0)
调用swap()时指定
onclick =&#34; swap(&#39; img0&#39;,&#39; img1&#39;,&#39; desc0&#39;,&#39; desc1&#39;)&#34 ;
你使用
&#39; desc0&#39;,&#39; desc1&#39;
而html有
ID =&#34; DESC1&#34;和id =&#34; desc2&#34;
不确定这是否是您的问题的原因,但附加的代码段将是非常有利的:)希望这是有帮助的