javascript – 仅当div具有类`is-active`时才添加文本以输入

问题

>未被选中的球员,即.如果没有pick.is-active类,则在单击它们时不应将其添加到任何输入字段
>从每个类别中挑选的最大玩家数量是4个守门员中的2个,15个防守队员中的6个和31个前锋中的12个.

更新#3

在这里添加了到Github回购的链接：https://github.com/onlyandrewn/wheatkings

更新#2

添加了片段,其中显示了如何切换is-inactive和is-active类.

更新#1 –

我删除了可能引起一些混淆的第二个片段

下面的这个Javascript片段抓取被点击的玩家的名字,然后将其放入输入字段,如果它有一个pick.is-active类.但是,假设您已经选择了两个守门员,但是当未被选中时(在默认类中处于默认状态时)点击该类别中剩下的两个守门员这些未被选中的玩家仍会被添加到输入中,这不是我们的想.

scripts.js – 这个需要修复的片段,即使已达到特定类别中的最大数量玩家,也会将玩家名称添加到输入字段

$(".player").on("click",function(){
    var playerNames = [];
    $("input:text").each(function(i,t) { playerNames.push(t.value) });

    if ($(this).find("picked.is-active")) {
        var playerName = $(this).find(".player__name").html();
        var index = playerNames.indexOf(playerName);

        if(index == -1) // add player
            $("input:text:eq(" + playerNames.indexOf("") + ")").val(playerName);
        else // remove player
            $("input:text:eq(" + index + ")").val("");
    } else {
        $("input").val("");
    }
});

scripts.js(如何切换非活动和活动类)

$(".btn--random").on("click",function() {

    // CHECK THESE NUMBERS
    var goalies_array = getRandomNumbers(1,4,2);
    var defensemen_array = getRandomNumbers(5,19,6);
    var forwards_array = getRandomNumbers(20,50,12);

    $(".goalies").text(goalies_array.join(","));
    $(".defensemen").text(defensemen_array.join(","));
    $(".forwards").text(forwards_array.join(","));

    var players_array = goalies_array.concat(defensemen_array).concat(forwards_array);

    // Add the class `is-active` based on the numbers generated
    var player = $(".player");
    $(".is-active").removeClass("is-active").addClass("is-inactive");


    $.each(players_array,function(index,value) {
      var player_index = value - 1; // Subtract one based on zero-indexing
      player.eq(player_index).find(".is-inactive").removeClass("is-inactive").addClass("is-active");
  });
});

function getRandomNumbers(start,end,howMany) {
    var arr = [];
    for (var i = start,j = 0; i <= end; j++,i++)
        arr[j] = i
    arr.sort(function() {
        return Math.floor((Math.random() * 3) - 1)
    });

    return arr.splice(0,howMany)
}

index.html(表单片段)


index.html(播放器片段)


最佳答案
将app状态存储到dom / html元素中并不是实现业务的好方法.你应该真的使用数据对象来保存应用程序状态.但是,假设您的玩家名称是唯一的,则以下将对每个类别强制执行最大计数约束.

(function () {
    var maxCounts = {
        forward: 12,defenceman: 6,goalie: 2
    };

    var getSelectePlayerNames = function () {
        var names = [];
        $("input:text").each(function (i,t) {
            t.value && names.push(t.value);
        });

        return names;
    };
    var getPlayerPositionCounts = function (players) {
        var $players = $('.player');
        var positions = [];
        $.each(players,function (i,player) {
            positions.push($players.find(".player__name:contains('" + player + "')").next().text().toLowerCase());
        });

        return positions.reduce(function (memo,val) {
            memo[val]++;
            return memo;
        },{ forward: 0,defenceman: 0,goalie: 0 });
    };

    $(".player").on("click",function () {
        var $el = $(this);

        var playerName = $el.find(".player__name").text();
        var selectedPlayerNames = getSelectePlayerNames();
        var index = selectedPlayerNames.indexOf(playerName);
        if (index > -1) {
            $("input:text:eq(" + index + ")").val("");

            return;
        }

        if (!$el.find(".picked.is-active").length) {
            return;
        }

        var playerPosition = $el.find(".player__position").text().toLowerCase();
        var selectedPositionCounts = getPlayerPositionCounts(selectedPlayerNames);
        if (selectedPositionCounts[playerPosition] < maxCounts[playerPosition]) {
            $("input:text:eq(" + selectedPlayerNames.length + ")").val(playerName);
        }
    });
})();

javascript – 仅当div具有类`is-active`时才添加文本以输入

猜你在找的HTML相关文章