Javascript 单击时不更新计数

我有两个multiselect菜单，在这里我试图得到每个multiselect加载时总共有多少子菜单，然后根据一个点击事件更新这些数字，点击事件将从一个推到另一个，反之亦然

加载部分工作正常。我得到了我期望的结果，而且计数是准确的

我遇到的问题是，一旦单击事件触发，就会更新这两个计数。我的计数永远不会改变

这是我的代码和一把小提琴：

var activeUser = $('.activeUsers');
var eligibleUser = $('.eligibleUsers');
var availableUserCount = $("#availableUsers option").length;
var eligibleUserCount = $("#eligibleUsers option").length;

activeUser.html(availableUserCount);
eligibleUser.html(eligibleUserCount);

$('#availableUsers').click(function () {
    return !$('#availableUsers option:selected').remove().appendTo('#eligibleUsers');
    activeUser.length(function() {
        return availableUserCount();
    });

    eligibleUser.length(function() {
        return eligibleUserCount();
    });
});

$('#eligibleUsers').click(function () {
        return !$('#eligibleUsers option:selected').remove().appendTo('#availableUsers');
activeUser.length(function() {
        return availableUserCount();
    });

    eligibleUser.length(function() {
        return eligibleUserCount();
    });
});

---

我做错了什么？

您的代码似乎有3个问题

• 您正在单击事件的第一行中使用

  return

  。因此，以下代码将永远不会执行（

  摆脱它，只有在找不到任何选项时才会返回）

• 对于div元素，没有称为

  length

  的方法。（

  改用.text（）

  ）
• 在函数

  return availableUserCount（）中返回长度时它将返回缓存的值。（
  您需要再次重新选择元素
  ）

因此，您的代码在技术上应该是这样的（仍可以进行进一步的重构）

$（“#可用用户选项”）。长度不会随选项的数量动态变化。一旦你把它放在顶端，它就永远是40了。这正是您想要的：

$('#availableUsers').click(function () {
    $('#availableUsers option:selected').remove().appendTo('#eligibleUsers');
    activeUser.text($("#availableUsers option").length); 
    eligibleUser.text($("#eligibleUsers option").length); 
});

虽然每次可以重新查询时都重新查询是不高效的

availableUserCount--; eligibleUserCount++;

---

并手动跟踪它。

在函数的第一行使用return可以防止任何其他代码在该块中执行

查看我的小提琴，了解执行此操作的功能化方法

function setUserCounts(){
    availableUserCount = $("#availableUsers option").length;
    eligibleUserCount = $("#eligibleUsers option").length; 
    activeUser.html(availableUserCount);
    eligibleUser.html(eligibleUserCount);
}

本质上，我们添加了这个函数，然后从单击处理程序中调用它，同时也删除了最佳解决方案（sic）：D

---

看起来您已经在使用Knockout了，您是否尝试过使用可观察数组来管理列表？检查您的JSFIDLE链接（您必须单击“更新”来创建新的JSFIDLE）哦，糟糕，让我来解决这个问题

function setUserCounts(){
    availableUserCount = $("#availableUsers option").length;
    eligibleUserCount = $("#eligibleUsers option").length; 
    activeUser.html(availableUserCount);
    eligibleUser.html(eligibleUserCount);
}

/*JQUERY FUNCTIONS*/
var activeUser = $('.activeUsers');
var eligibleUser = $('.eligibleUsers');
var eligibleUserCount = function(){eligibleUser.html($("#eligibleUsers option").length)};
var availableUserCount = function(){activeUser.html($("#availableUsers option").length)};

eligibleUserCount();
availableUserCount();

$('#availableUsers').click(function () {
    $('#availableUsers option:selected').remove().appendTo('#eligibleUsers');
    availableUserCount();
    eligibleUserCount()
});

$('#eligibleUsers').click(function () {
    $('#eligibleUsers option:selected').remove().appendTo('#availableUsers');
    availableUserCount();
    eligibleUserCount()
});