jQuery 类选择器不起作用，id 选择器仅适用于“body”答案

【问题标题】：jQuery class selector doesn't work and id selector works only with "body"jQuery 类选择器不起作用，id 选择器仅适用于“body”
【发布时间】：2014-06-27 09:13:41
【问题描述】：

我正在尝试使用 jquery 应用 CSS 值，但类选择器或 id 选择器由于某种原因不起作用。

Here is my fiddle:

如您所见，如果我使用 id="kitten"，则不会发生任何事情。

HTML

    <div id="kitten"></div>

脚本

    $(function(){
    var x = 0;
    setInterval(function(){
        x-=1;
        $("kitten").css("background-position", x + "px 0");
    }, 10);
});

CSS

    html, body { height: 100%; width: 100%;}
    #kitten {
    background-image: url("http://sereedmedia.com/srmwp/wp-content/upload/kitten.jpg");
    background-repeat: repeat-x;
    }

它不起作用。但是，如果我使用“body”而不是 id - 一切都会开始工作。

Fiddle with "body"

为什么我不能使用 jQuery id 选择器或类选择器？

【问题讨论】：

了解 animate()...并了解选择器

标签： javascript jquery css

【解决方案1】：

首先你需要做：

$("#kitten").css("background-position", x + "px 0");

因为你没有得到 ID 选择器。

并为您的 div 定义宽度和高度，以显示您的图像：

#kitten {
    background-image: url("http://sereedmedia.com/srmwp/wp-content/uploads/kitten.jpg");
    background-repeat: repeat-x;
    width: 390px; <----- LIKE this
    height: 200px; <----- LIKE this
}

DEMO

【讨论】：

谢谢！定义 div 大小成功了！现在它运行完美！

【解决方案2】：

要引用一个 id，你需要在 id 本身之前使用 hash，就像你在 css 中所做的那样。正确的代码是：

$("#kitten").css("background-position", x + "px 0");

【讨论】：

【解决方案3】：

 $("kitten").css("background-position", x + "px 0");

这行错了..

这个可以解决问题

 $("#kitten").css("background-position", x + "px 0");

您需要为 ID 选择器放置正确的字符串文字检查一下here。

【讨论】：

【解决方案4】：

Id 选择器以#: 为前缀：

$("#kitten").css("background-position", x + "px 0");

类选择器将以. 为前缀，例如，如果kitten 是一个类：

$(".kitten").css("background-position", x + "px 0");

当您使用body 选择器时，您使用的是没有前缀的标签选择器。

$("input"); //selects all input tags

对于大多数基本选择器，只需遵循 CSS 选择器语法即可。

【讨论】：

.kitten 和 #kitten 都不起作用。我试图理解为什么“body”仍然有效以及是什么中断了脚本。

【解决方案5】：

您的选择器缺少用于按 id 选择标签的 #：

$("#kitten")

【讨论】：