div在点击时显示两次

时间:2017-11-13 10:34:56

标签: javascript jquery html css

我有这段代码:

    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提前

1 个答案:

答案 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;

不确定这是否是您的问题的原因,但附加的代码段将是非常有利的:)希望这是有帮助的

相关问题