jquery 幻灯片放映。确定您所在的幻灯片 AKA Div答案

【问题标题】：jquery slide show. Determine which slide AKA Div you are onjquery 幻灯片放映。确定您所在的幻灯片 AKA Div
【发布时间】：2011-11-03 05:00:08
【问题描述】：

我有一个由 div 组成的幻灯片。每个 Div 包含一张图片和一些 html 控件。我有一个问题，如果您在第一个幻灯片以外的幻灯片上单击其中一个控件，它只会更新第一个控件。幻灯片之间唯一不同的是，当您浏览幻灯片时，显示会从无切换到阻止。 jquery 中是否有任何方法可以更改您在 info 上的幻灯片，而无需执行每个语句并搜索未隐藏的类？感谢您的帮助。

 <div class="TheSlide">
      <table>
      <tr>
      <td>

          <div id="divSlideImage"> <asp:HiddenField runat="server" ID="HiddenField1" Value='<%#Eval("ID") %>' />
              <asp:ImageButton runat="server" CssClass="AlbumImageView" Height="480" ID="MainPicture"
                  ImageUrl='<%#Eval("PhotoMainImageURL") %>' AlternateText="Slide not showing properly. Refresh Page." />
                  <div id="pictureTagBorder"></div>
                  </div>

 <div class="TheSlide">
      <table>
      <tr>
      <td>

          <div id="divSlideImage"> <asp:HiddenField runat="server" ID="HiddenField1" Value='<%#Eval("ID") %>' />
              <asp:ImageButton runat="server" CssClass="AlbumImageView" Height="480" ID="MainPicture"
                  ImageUrl='<%#Eval("PhotoMainImageURL") %>' AlternateText="Slide not showing properly. Refresh Page." />
                  <div id="pictureTagBorder"></div>
                  </div>

当用户单击控件时，我正在尝试将此类标记到图片上，但它只会在第一张幻灯片上执行此脚本。

  $(document).ready(function () {
            var top = y - 232;
            var left = x - 145;
            $('#pictureTagBorder').css({ top:top , left: left });
        });

【问题讨论】：

标签： c# jquery asp.net html css

【解决方案1】：

pictureTagBorder 不是一个类，它是一个id 属性。您的id 属性必须在每个页面上都是唯一的，我猜您有多个带有id="pictureTagBorder" 和id="divSlideImage"（可能还有其他）的元素，因此您的HTML 无效。一个 id 选择器，例如#pictureTagBorder，最多匹配一个元素并且你说的是

它只会在第一张幻灯片上执行此脚本

所以你的问题是你使用 id 属性，而你应该使用 CSS 类来识别你的幻灯片元素。

【讨论】：