Question

在以下javascript / html中，我可以参考 div.answer ，但如何参考 div＃flashcard-001.answer ？

HTML：

<div id="flashcard-001" class="flashcard">
    <div class="question">What color is the sky?</div>
    <div class="answer">blue</div>
    <button class="show">Show</button>
    <button class="hide">Hide</button>
</div>

使用Javascript：

//run when page is loaded
google.setOnLoadCallback(function() {
    $("div.answer").hide(); //WORKS
    $("div#flashcard-001.answer").hide(); //DOES NOT WORK
    $("button.show").bind("click", function(e) {
        $("div.answer").show();
    });
    $("button.hide").bind("click", function(e) {
        $("div.answer").hide();
    });
});

Answer 1

你错过了一个空格：

$("div#flashcard-001 .answer").hide();

Answer 2

尝试：

$（ “＃烧录-001”）的儿童（ “回答”。）的hide（）;

Answer 3

由于您想要使用ID flashcard-001 选择DIV元素的后代，因此您需要descendant selector或 - 因为您的元素也是直接子元素 - {{ 3}}：

div#flashcard-001 .answer
div#flashcard-001 > .answer

Answer 4

最外层的div有一个完整的选择器：

div#flaschard-001.flashcard

不

div#flashcard-001.answer

我相信你只是使用了错误的选择器。

如何在jQuery中引用id + class的HTML元素？

4 个答案: