时间戳

首页 > 解决方案 > id 选择器不工作，但类选择器工作。在选择器中使用变量

jquery - id 选择器不工作，但类选择器工作。在选择器中使用变量

问题描述

当我尝试使用 id 选择器时，这不起作用：

$("<div>",{id:"o"+i,"class":"overlay"}).appendTo("#"+i);
$("<div>",{id:"te"+i,"class":"text"}).appendTo(".overlay");
$("#te"+i).html(id);

但是当我使用类选择器时这是有效的：

$("<div>",{"class":"overlay"}).appendTo("#"+i);
$("<div>",{"class":"text"}).appendTo(".overlay");
$(".text").html(id);

我的框架看起来像这样：

<div class = "GalleryandRate" id = "GalleryandRate">
  <div id="gallery" onload="mygallery()">
    <div class="movie">
      <img src="SX300.jpg" alt="poster" width="250" height="350">
      <div class="overlay">
        <div class="text">a variable</div>
      </div>
      <div class="title">scooby doo</div>
      <button class="nominate" ><i class="fa fa-plus-circle"></i> Nominate </button>
    </div>
  </div>
<div id="rate">
</div>

谢谢

更新：

由于人们问为什么在创建元素时不设置文本。有一个循环，对于 json 数据中的每部电影，每个地方都有一个关于海报叠加效果的特定描述。文本元素的 innerhtml 将是那一部电影的描述。

详细代码可以在https://github.com/UneSaltedFish/Nominate_Movie上看到，它也托管在https://unesaltedfish.github.io/Nominate_Movie/上，以查看我将光标放在图片上时的叠加效果。

标签： jquery

解决方案

正如 Barmar 所说，我没有注意到，需要将 .overlay 更改为 #"o"+i

$("<div>",{id:"o"+i,"class":"overlay"}).appendTo("#"+i);
$("<div>",{id:"te"+i,"class":"text"}).appendTo("#o"+i);
$("#te"+i).html(id);

这很完美！

推荐阅读