jquery 根据< option>所选选项重新计算

yhived7q  于 2023-10-17  发布在  jQuery
关注(0)|答案(1)|浏览(95)

我有一个从1到最大值的选择。我想删除选定的选项并重新计算,使新选项的值不超过选定的选项。
例如,如果最大值为3,则选项为:

<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>

然后,如果选择1,则选项将为:

<option value="1">1</option>
<option value="2">2</option>

如果选择2,则剩余选项将为:

<option value="1">1</option>

如果选择了3,则将没有更多选项可供选择。
我想不出怎么做这个计算。
一个“活”的例子:
这些选项等于多个购物车。如果carts的最大值是3,那么它会是这样的:
如果选择了1辆车,则可以选择保留1辆或2辆车。如果选择了2个购物车,则可以选择1个购物车。如果选择了3个推车,则没有更多推车可供选择。

ktecyv1j

ktecyv1j1#

当您单击列表上的选项时,可以触发事件来执行函数。此功能将获得您可以玩的最大牌数,并计算它与所选牌数之间的差异。之后,它将删除不能再玩的牌的数量。
你可以试试下面的代码:

/**
* Allows you to calculate the difference between the number of possible cards to play and the number of cards you have selected.
* And remove the number of cards that you can no longer play.
* 
* @param maxCard The max maximum numbers of cards that you can play
* @param selectedCard The number of cards that you selected to play
* @returns
*/
function calculateCard(maxCard, selectedCard) {
    let cardToShow = (maxCard - selectedCard);
    
    $(".card").each(function(index) {
        if($(this).val() > cardToShow)
            $(this).remove();
    });
}

/**
* Allows you to collect the maximum number of cards you can play
* 
* @returns max number of cards
*/
function getMaxCard(){
    let max = 0;
    $(".card").each(function( index ) {
        let element = $(this).val();
        if(element > max)
            max = element;
    });
    
    return max;
}

$(".card").on("click", function() {
    let maxCard = getMaxCard();
    let selectedCard = $(this).val();
    calculateCard(maxCard, selectedCard);
} );
.card {
    width: 20px;
    height: 20px;
    border: 1px solid;
    text-align: center;
    cursor: pointer;
    margin-bottom: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<option class="card" value="1">1</option>
<option class="card" value="2">2</option>
<option class="card" value="3">3</option>
<option class="card" value="4">4</option>
<option class="card" value="5">5</option>

相关问题