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选项”）。长度不随选项数量动态变化。一旦你把它设置为顶部，它永远是40。这样做你想要的：

availableUserCount--; eligibleUserCount++;

虽然每次执行时都无法重新查询

并手动跟踪。

Answer 3

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

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

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

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

基本上，我们添加此功能，然后在点击处理程序中调用它，同时删除

Answer 4

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

:hover

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

计数未点击更新

4 个答案: