c# - jquery 幻灯片放映。确定您所在的幻灯片 AKA Div

Question

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

 <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 });
        });

Answer 1

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

it will only do this script on the first slide

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