Question

我有一些从服务器（ajax）检索用户的代码，我使用了一些<a>标签来显示它，当你点击一个<a>标签时，用户就可以使用它。应该将它添加到数组in_group。第一个工作，第二个工作转到alert()函数并将用户添加到数组，这让我感到困惑。删除按钮也不起作用。我究竟做错了什么？我希望只有在不存在的情况下才将用户添加到in_group数组中，并且在按下按钮时将其删除。

var in_group = [];

$("#students-body").on('click', 'a', function() {
    var modal = $("#manageGroupMembers");

    var student_id = $(this).attr('student-id');
    var student_name = $(this).html();
    var student = {
        id: student_id,
        name: student_name
    };


    console.log(in_group.length);

    if (in_group.length > 0)
    {
        for (i = 0; i < in_group.length; i++)
        {
            console.log(in_group[i].id);
            if (in_group[i].id === student_id)
            {
                alert('in grp');
                return;
            }
            else
            {
                in_group.push(student);
            }
        }

    }
    else
    {
        in_group.push(student);
    }


    RefreshGroup();
    //modal.modal('hide');
});

function RefreshGroup()
{
    var students_group = $("#students-group");
    var html = "";

    if (in_group.length > 0)
    {
        for (i = 0; i < in_group.length; i++)
        {
            html += "<span>"+in_group[i].name+"</span>";
            html += "<button class='btn btn-danger' onclick='event.preventDefault();RemoveFromGroup("+i+")'>x</button>";
        }

        students_group.append(html);
    }
}

function RemoveFromGroup(index) {
    in_group.splice(index, 1);
    RefreshGroup();
}

HTML：

<div class="form-group">
    <label for="group_members">Members</label>
    <button class="btn btn-primary" style="display: block;" onclick="event.preventDefault()" id="add-student-btn">Add Member</button>
    <div id="students-group"></div>
</div>

模态：

<!-- Modal -->
<div class="modal fade" id="manageGroupMembers" role="dialog">
    <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Add Member to Group</h4>
            </div>
            <div class="modal-body">

                <div id="students-body"></div>
                <div id="pagination-students"></div>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>

    </div>
</div>

Answer 1

那是因为您在for循环中插入id。更改您的代码：

...your code before this....
var student_id = $(this).attr('student-id');
var student_name = $(this).html();
var student = {
    id: student_id,
    name: student_name
};

var index = in_group.findIndex(function(std) {
  return std.id == student.id;
});

if(index === -1) {
  in_group.push(student);
} else {
  alert('student was already in array')
}

这样，您可以检查学生是否在阵列中。如果不是（-1），则插入它。否则你提醒

Answer 2

在代码的这一部分中，您将循环in_group数组以查找具有特定ID的学生条目。

if (in_group.length > 0)
{
    for (i = 0; i < in_group.length; i++)
    {
        console.log(in_group[i].id);
        if (in_group[i].id === student_id)
        {
            alert('in grp');
            return;
        }
        else
        {
            in_group.push(student);
        }
    }

}
else
{
    in_group.push(student);
}

RefreshGroup();

如果你找到它，你alert，，然后你停止循环和整个功能。如果你不找到它，你推它，但你没有打破循环。您继续循环，重新执行检查in_group[i].id === student_id并执行alert。

您可以在调用return;后添加RefreshGroup，但是，为什么不摆脱循环并让事情变得更容易？

let isInGroup = in_group.find(studentEntry => studentEntry.id === student_id);

if(isInGroup){
  alert("in grp");
}
else{
  in_group.push(student);
  RefreshGroup();
}

这将完全取代上述部分，它将起作用。

至于为什么删除不起作用：

event未定义。它可能会产生ReferenceError。（您的其他<button>也存在相同问题。）
而不是内联事件属性，请查看事件委托和标准事件侦听器（jQuery使用click方法 - 使用它！）
查看data-属性或jQuery的data以保存索引的值。

事件委托可能如下所示：

var students_group = $("#students-group");
students_group.on("click", "button", function(e){
  RemoveFromGroup($(this).attr("data-index"));
});

然后，在生成HTML时：

html += "<button class='btn btn-danger' data-index='" + i + "'>x</button>";

我还建议阅读有关Array.prototype方法的内容，特别是迭代方法。

单击锚意外调用alert（）

2 个答案: