javascript - div 在点击时显示两次

Question

我有这个代码:

    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 和 tab-index 值我只想删除它并显示一次......一个想法？提前谢谢

Answer 1

调用 swap() 时指定

onclick="swap('img0', 'img1', 'desc0', 'desc1')"

你用

'desc0', 'desc1'

而 html 有

id="desc1" and id="desc2"

不确定这是否是您遇到问题的原因，但附上一个片段会很有帮助 :) 希望这对您有所帮助