点击不更新计数

Question

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

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

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

这是我的代码以及 fiddle:

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 中输入长度 return availableUserCount(); 时，它会 return 为您提供缓存的值。 (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

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

查看我的 fiddle 以了解执行此操作的功能化方法

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

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

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

Answer 4

最佳解决方案（原文如此）: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/

点击不更新计数

Count not updating on click

javascript

jquery

count

string-length