点击计数不更新

Question

我有两个多选菜单，我试图在加载时获取每个多选中总共有多少个孩子，然后根据从一个推送到另一个的点击事件更新数字，反之亦然反之亦然。

onload 部分工作正常。我得到了我期望的结果并且计数是准确的。

我遇到的问题是在点击事件触发后更新这两个计数。我的计数永远不会改变。

这是我的代码和小提琴：

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();
    });
});

http://jsfiddle.net/mujaji/8gkLyfe3/3/

我做错了什么？

Answer 1

您的代码似乎有 3 个问题。

• 您在点击事件的第一行使用了return。所以下面的代码永远不会被执行 (Get rid of that and only return if you cannot find any options)
• 对于 div 元素没有称为 length 的方法。 (Use .text() instead)
• 当您在函数return availableUserCount(); 中返回长度时，它将返回缓存值。 (You need to reselect the element again)

所以你的代码在技术上应该是这样的（仍然可以进行进一步的重构）

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 () {
    !$('#availableUsers option:selected').remove().appendTo('#eligibleUsers');
    activeUser.text(function() {
        return $("#availableUsers option").length;
    });

    eligibleUser.text(function() {
        return $("#eligibleUsers option").length;
    });

});

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

    eligibleUser.text(function() {
        return $("#eligibleUsers option").length;
    });
});

Check Fiddle

Answer 2

$("#availableUsers option").length 不会随着选项的数量而动态变化。一旦你把它设置在顶部，它永远是 40。这就是你想要的：

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

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

availableUserCount--; eligibleUserCount++;

并手动跟踪它。

Answer 3

最佳解决方案（原文如此）：D

/*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()
});

http://jsfiddle.net/8gkLyfe3/5/

Answer 4

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

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

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

http://jsfiddle.net/8gkLyfe3/6/

本质上，我们添加了这个函数，然后在点击处理程序中调用它，同时删除了