Question

我正在尝试用class和id选择两个不同的元素，第一个工作，但第二个不工作（它没有id工作），我无法弄清楚为什么。请帮助我。

码

$(document).ready(function() {
var num = 0;
$("#add").click(function() {
    $("main").append("<div class=\"card\" style=\"width: 20rem;\">\
    <div class=\"card-block\">\
    <h4 class=\"card-title\" id=\"" + num.toString() + "\"></h4>\
    <p class=\"card-text\" id=\"" + num.toString() + "\"></p>\
    </div>\
    </div>");
    var title = $("#noteTitle").val();
    var body = $("#noteBody").val();
    var photo = $("#notePhoto").val();
    if (photo) {
        $(".card").prepend("<img class=\"card-img-top\" src=" + photo + " alt=\"Card Image\">");
    }
    $(".card-title#"+ num.toString()).html(title);
    $(".card-text#"+ num.toString()).html(body); //<-- here is where I get the problem
    num ++;
});
})

Answer 1

在这里，您可以使用解决方案。 https://jsfiddle.net/0knefedh/

$(document).ready(function() {
var num = 0;
$("#add").click(function() {
    $("body").append("<div class=\"card\" style=\"width: 20rem;\">\
    <div class=\"card-block\">\
    <h4 class=\"card-title\" id=\"title" + num.toString() + "\"></h4>\
    <p class=\"card-text\" id=\"text" + num.toString() + "\"></p>\
    </div>\
    </div>");
    var title = "dasdasd";
    var body = "asdasdas";
    var photo = $("#notePhoto").val();
    if (photo) {
        $(".card").prepend("<img class=\"card-img-top\" src=" + photo + " alt=\"Card Image\">");
    }
    $(".card-title#title"+ num.toString()).html(title);
    console.log(num);
    $(".card-text#text"+ num.toString()).html(body); //<-- here is where I get the problem
    num ++;
});
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="submit" id="add" value="Add" >Add</button>

您为 .card-title 和 .card-body 生成 ID 时出现问题。两者都具有相同的ID，其中 ID 应该是唯一的。

所以，它第一次起作用然后它没有。

用jquery选择带有class和id的元素

1 个答案: