選擇帶有類和id的元素與jquery

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應該是唯一的。

因此，它第一次起作用，然后沒有起作用。