Question

我在同一页面上的两个不同文章标签上使用Jquery文件。这是两个不同的文章标签，

第一篇文章标签，

    <article id="popupAbout" class="popupAbout"> <a id="popupAboutClose"><img src="../original/images/close.png" width="50" alt="" /></a>
  <h1>Maps of Arizona</h1>
  <div id="container">
    <div id="photo-wrapper">
        <img class="image" id="image1" src="images/Wet.jpg"  height="450px" width="800px" alt="image 1"/>
        <img class="image" id="image2" src="images/Dens.jpg" height="450px" width="800px" alt="image 2"  />
        <img class="image" id="image3" src="images/Slope.jpg" height="450px" width="800px" alt="image 3"  />

        <!-- 
        <div id="transition-container"> This effect is not needed for this demo         
        </div>
        -->

        <img id="previous-btn" src="images/left_arrow.png" alt="Previous Button" />
        <img id="next-btn" src="images/right_arrow.png" alt="Next Button" />
    </div>
  </div>  
</article>

第二篇标签，

    <article id="popupProjects" class="popupProjects"> <a id="popupProjectsClose"><img src="../original/images/close.png" width="50" alt="" /></a>
  <h1>Maps of Four States</h1>
  <div id="container">
    <div id="photo-wrapper">
        <img class="image" id="image1" src="images/3843_T_av6_4states.jpg"  height="450px" width="800px" alt="image 1"/>
        <img class="image" id="image2" src="images/4.jpg" height="450px" width="800px" alt="image 2"  />
        <img class="image" id="image3" src="images/beach6.jpg" height="450px" width="800px" alt="image 3"  />

        <!-- 
        <div id="transition-container"> This effect is not needed for this demo         
        </div>
        -->

        <img id="previous-btn" src="images/left_arrow.png" alt="Previous Button" />
        <img id="next-btn" src="images/right_arrow.png" alt="Next Button" />
    </div>
  </div>
</article>

如您所见，标签内容几乎相同。我在两者上使用相同的Fade.js。第一个工作正常，但第二个，我只能看到按钮和图像容器，这是空的。

HELP !!!

Answer 1

问题可能是由于您正在重复使用ID。所有ID都必须是唯一的，但您多次使用相同的ID（例如next-btn）。

将您的jQuery更改为按类而不是id进行选择，并确保两篇文章都包含相同的类。

在同一页面上的两个不同的文章标签上使用相同的jquery

1 个答案: