javascript - 在使用 jQuery 追加到列表之前检查重复的 div

Question

这应该是微不足道的，但我遇到了问题......

基本上我想做的是在用户点击“类(class)”时将一个新的“div”附加到“selected-courses”。当且仅当当前类(class)不在“所选类(class)”框中时，才会发生这种情况。

我遇到的问题是，执行此操作时，“selected-courses”部分没有附加任何内容。我已经使用警报语句来确保代码实际上正在运行。我对 .on 和 .each 工作方式的理解有问题吗？我可以这样使用它们吗？

这是一个 fiddle http://jsfiddle.net/jq9dth4j/

$(document).on("click", "div.course", function() {
    var title = $( this ).find("span").text();
    var match_found = 0;

    //if length 0 nothing in list, no need to check for a match     
    if ($(".selected-course").length > 0) {
        match_found = match(title);
    }
    if (matched == 0) {
        var out = '<div class="selected-course">' + '<a href="#">' + title + '</a>'+'</div>';
        $("#selected-box").append(out); 
    }       
});

//checks to see if clicked course is already in list before adding.
function match(str) {
    $(".selected-course").each(function() {
        var retval = 0;
        if(str == this.text()) {
            //course already in selected-course section
            retval = 1;
            return false;
        }
    });
    return retval;
}

Answer 1

您的 fiddle 中有几个小问题。

参见固定 fiddle :http://jsfiddle.net/jq9dth4j/1/

function match(str) {
    var retval = 0;
    $(".selected-course").each(function() {
        if(str == $(this).text()) {
            retval = 1;
            return false;
        }
    });
    return retval;
}

您没有将您的 this 包装在 jquery 对象中。所以它抛出一个异常说 this 没有方法 text()。

其次，您的 retval 是在 each 内声明的，因此它无法在 each 之外返回，这是错误的范围。

最后是 block 中的 if:

if (matched== 0) {
    var out = '';
    out += '<div class="selected-course">' + '<a href="#">' + title + '</a>'+'</div>';
    $("#selected-box").append(out); 
}   

正在查看错误的变量，它正在查看 matched，它不存在导致异常。