Question

我试图从同一函数中给出一个类的元素中获取信息，但找不到该类：

HTML：

<style>
  .class-b { background: red; }
</style>

<div class="class-a">Hello!</div>
<div class="class-a">Hola!</div>
<div class="class-a">Bonjour!</div>

<button class="clicker">Click</button>

JS / jQuery的：

var $b = $(".class-b");

$(".clicker").click(function() {
    $(".class-a:first").addClass("class-b");
    console.log($b.html());
});

当我在Hello!中获得console.log时，这不会返回任何内容。所以我想，也许函数还没有完成，类没有渲染，因此无法找到。所以我从函数中删除了日志记录并将其插入回调：

var $b = $(".class-b");

function c_log() {
  console.log($b.html());
}

$(".clicker").click(function() {
    $(".class-a:first").addClass("class-b");
    c_log();
});

但仍然没有任何回报。我是否忽略了DOM的某些内容？

Answer 1

您的$b是当时类名为“.class-b”的所有元素。仅仅因为你给了一个新元素，类名“.class-b”并不意味着$b将被更新。

只需重置$b ...

即可

$(".clicker").click(function() {
    $(".class-a:first").addClass("class-b");
    $b = $('.class-b');
    console.log($b.html());
});

Answer 2

在$b被赋予类.class-a:first之前定义.class-b是错误的，因此$b.html()未定义，因为.class-b没有元素}。添加课程时需要重新定义$b：

var $b = $(".class-b");

function c_log() {
  console.log($b.html());
}

$(".clicker").click(function() {
    $(".class-a:first").addClass("class-b");
    $b = $(".class-b");
    c_log();
});

JSFiddle Demo

Answer 3

当你写完：

var $b = $(".class-b");

它确实将当前 b放入$b变量中。在您的代码中稍后使用$b时，它不会追溯检查新增内容。将上面一行放在click回调中，每次都会重新检查一次，然后你就变成了金色。

新类jquery无法找到最近添加的类的元素

3 个答案:

JSFiddle Demo