Question

我正在尝试开发一个足球队线功能，每个球员使用一个选择框可存储多达18名球员（11名首发球员和7名球员）。

当从一个选择框中选择一个玩家时，他们应该隐藏在所有其他选择框中，以阻止用户再次选择同一个玩家。

我已经编写了一个javascript / jquery函数来执行此操作，但它非常冗长，我猜测使其更易于管理的最佳选择是编写一个while循环，但我得到了自己混淆尝试编码。

看到

我是否正确地认为我需要做的事情可能是将一个while循环嵌套在另一个while循环中，以便在计数与玩家数量相同时忽略...

i = 1;
playerNo = 1;
while (i < 19) {        
    while (playerNo < 19 && i != playerNo) {
        playerID = $("#player" + i + "Name option:selected").val();
        $("select#player" + playerNo + "Name >option" ).filter( "[class='"+ playerID +"']" ).hide();
        $("select#player" + playerNo + "Name >option" ).filter( "[class!='"+ playerID +"']" ).show();
        playerNo++;
    }
    i++;
}

这是沿着正确的方向吗？

Answer 1

嗯，不知道该程序的完整概念是什么，但我认为你的解决方案有点矫枉过正。
我会给每个复选框命名（例如："plr"+ID），然后我会向它添加一个onclick事件。当事件被触发时，复选框将搜索具有相同名称的所有复选框并禁用它们。

 function selectPlr(event) {
     var other = document.getElementsByName(this.name);  //Get element collection
     for(var i=0; i<other.length; i++) {
       if(other[i]!=this) {  //Ignore itself
         other[i].disabled = this.checked;   //Disable if the player is picked, enable if unpicked
       }
     }
 }

当然，可以使用类名：

 var other = $("input."+this.className);

这是active code。

Answer 2

不，你应该使用for循环。

标准是在计算某些内容时使用for循环，在等待事件或值更改时使用while循环。

for循环中的逻辑很难遵循，无论如何看起来都是错误的。

但无论如何，最简单的方法是使用jquery的强大功能：

$(function() {
    $("select").on("change", function() {
        //reset to showing all the options
        $("select option").show(); 

        //for each selected option
        $("select option:selected").each(function() {
            var optionSelected = this;
            var playerID = $(this).attr("class");
            //hide the option in all the other dropdowns
            $("option." + playerID).each(function() {
                if(this != optionSelected) {
                    $(this).hide();
                }
            });
        });
    });
});

这里的工作示例：

http://jsfiddle.net/4avwm/1/

Answer 3

这可能会让您实现：http://jsfiddle.net/2jGDU/

$('#players').change(function () {
   $('#pl_11').prepend($('option:selected', this).clone());
   $('option:selected', this).remove();
   if ($('option', this).length <= 8) {
    $('option:first', this).remove();
    $('#sub').prepend($(this).html());
    $('option', this).remove();
   }
});

JavaScript while循环获取select选项并隐藏其他选择框中的选项

3 个答案: