Question

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

基本上我要做的是在用户点击“课程”时向“选定课程”附加一个新的“div”。当且仅当当前课程不在“选定课程”框中时，才会发生这种情况。

我遇到的问题是执行此操作时，“选定课程”部分没有附加任何内容。我使用了alert语句来确保代码实际上正在运行。我对这种方式的理解是否存在问题？每个工作？我可以这样使用它们吗。

$(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

你的小提琴中有一些小问题。

请参见固定小提琴：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被宣布在每个内部，因此无法在每个错误的范围之外返回。

最后是块中的if：

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

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

Answer 2

依靠检查文本元素包含的内容并不是解决此类问题的最佳方法。它很容易出错（如你所知），它可能很慢，它会为你提供长代码，并且它对HTML中的小变化很敏感。我建议使用自定义data-*属性。

所以你会得到这样的HTML：

<div class="course" data-course="Kite Flying 101"> 
    <a href="#">
        <span>Kite Flying 101</span> 
    </a>
</div>

然后JS就像这样简单：

$(document).on('click', 'div.course', function() {
    // Get the name of the course that was clicked from the attribute.
    var title = $(this).attr('data-course');
    // Create a selector that selects everything with class selected-course and the right data-course attribute.
    var selector = '.selected-course[data-course="' + title + '"]';
    if($(selector).length == 0) {
        // If the selector didn't return anything, append the div.
        // Do note that we need to add the data-course attribute here.
        var out = '<div class="selected-course" data-course="' + title + '"><a href="#">' + title + '</a></div>';
        $('#selected-box').append(out);    
    }
});

但要注意课程名称的区分大小写！

Here是一个工作小提琴。

Answer 3

尝试使用此代码，阅读注释以了解更改的位置：

$(document).on("click", "div.course", function () {
  var title = $(this).find("span").text().trim(); // use trim to remove first and end whitespace
  var match_found = 0;

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

function match(str) {
  var retval = 0; // this variable should place in here
  $(".selected-course").each(function () {

    if (str == $(this).find('a').text().trim()) { // find a tag to catch values, and use $(this) instead of this
        retval = 1;
        return false;
    }
  });
  return retval; // now can return variable, before will return undefined
}

更新了DEMO

Answer 4

您的问题是：

1。this.text()无效。你必须使用$(this).text() 2.您在var retval = 0;内定义each statement并尝试将其返回each statement之外。所以将这一行移出each statement 3。matched未定义。它应该在match_found行if (matched == 0) { 4.使用trim()来获取和设置文本，因为文本可能包含前导和尾随空格。

您更新的JS是

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

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

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

Updated you Fiddle

在使用jQuery追加到列表之前检查div是否有重复项

4 个答案: