Javascript JQuery:get"；数据值=n"；在洗牌数组中的可见li的

我正在尝试创建一个纸牌游戏（设置为大量uls，随机洗牌li元素），当它们出现在点击功能上时，每张牌（可见的li元素）可以获得1分，并且某些牌可以获得额外的积分

我遇到的问题是如何计算这些积分卡的价值，以便对它们进行汇总。目前，代码仅指ul中的第一个li，这不是我想要的。我试过“li:visible”，但没用。有什么提示吗

此处演示[更新]：

（另外，如果“data value=n”方法太混乱，我很乐意放弃它，但我不知道用什么来代替它。）

HTML[更新]：

    <a class="Tab" href="#dealBtn"><div id="restartBtn">Restart</div></a>
    <a class="Start" href="#dealBtn"><div id="dealBtn">Deal again</div></a>

<!--href loops-->
<div class="Cad_card"><a class="Cad_title">Pack of Cards 1</a>

    <ul>
        <li class="Cad_menu" data-value="0">Card 1: +1 point</li>
        <li class="Cad_menu" data-value="2">Card 2: **+2 bonus points**</li>
        <li class="Cad_menu" data-value="0">Card 3: +1 point</li>
        <li class="Cad_menu" data-value="0">Card 4: +1 point</li>
        <li class="Cad_menu" data-value="0">Card 5: +1 point</li>
        <li class="Cad_menu" data-value="0">Card 6: +1 point</li>
        <li class="Cad_menu" data-value="0">Card 7: +1 point</li>
        <li class="Cad_menu" data-value="0">Card 8: +1 point</li>
    </ul>
</div>
<!--end div.Cad_card-->
<div class="Ce_card"><a class="Ce_title">Pack of Cards 2</a>

    <ul>
        <li class="Ce_menu" data-value="0">Card 1: +1 point</li>
        <li class="Ce_menu" data-value="0">Card 2: +1 point</li>
        <li class="Ce_menu" data-value="0">Card 3: +1 point</li>
        <li class="Ce_menu" data-value="0">Card 4: +1 point</li>
        <li class="Ce_menu" data-value="0">Card 5: +1 point</li>
        <li class="Ce_menu" data-value="3">Card 6: **+3 bonus points**</li>
        <li class="Ce_menu" data-value="0">Card 7: +1 point</li>
        <li class="Ce_menu" data-value="0">Card 8: +1 point</li>
    </ul>
</div>
<hr/>
<div>Cards dealt:
    <div id="inlineOutput1">0</div>Bonus points:
    <div id="inlineOutput2">0</div>Total points:
    <div id="inlineOutput3">0</div>Rounds:
    <div id="inlineOutput4">0</div>
</div>

var cardsDealt = $('div[class$=_card]').length;
var firstBonus = parseInt($('.Cad_menu').attr('data-value'), 10);
var secondBonus = parseInt($('.Ce_menu').attr('data-value'), 10);
var totalBonus = firstBonus + secondBonus;
var totalScore = cardsDealt + totalBonus;

$('#dealBtn').click(function () {
    //get number of cards dealt
    $('#inlineOutput1').html(function (i, val) {
        return val * 1 + cardsDealt;
    });

    //bonus points
    $('#inlineOutput2').html(function (i, val) {
        return val * 1 + totalBonus;
    });

    //total score
    $('#inlineOutput3').html(function (i, val) {
        return val * 1 + totalScore;
    });
});

$('#restartBtn').click(function () {
    $('#inlineOutput1, #inlineOutput2, #inlineOutput3').html(function (i, val) {
        return val * 0;
    });
    $('#inlineOutput4').html(function (i, val) {
        return val * 1 + 1;
    });
});

//CARD SHUFFLE FUNCTION

//show the title of each card, e.g. "Cad", "Ce", etc., on page load 
$('[class$=_title]').show();

//hide the list of words associated with each card on page load.
$('[class$=_card] ul').hide();

//reverses the two fields above and shuffles the cards
jQuery(function ($) {
    $('#startBtn, #dealBtn').click(function (event) {
        event.preventDefault();
        $('[class$=_title]').hide();
        //hide the title of each card, e.g. "Cad", "Ce", etc.
        $('[class$=_card] ul').show();
        //show the list of words associated with each card, after title is hidden
        $('[class$=_card] ul').shuffle();
        //shuffle the list of words associated with each card
    });
}); //end of Jquery command

//algorithm for controlling the shuffle function
(function ($) {

    $.fn.shuffle = function () {
        return this.each(function () {
            var items = $(this).children().clone(true);
            return (items.length) ? $(this).html($.shuffle(items)) : this;
        });
    };

    $.shuffle = function (arr) {
        for (var j, x, i = arr.length; i; j = parseInt(Math.random() * i), x = arr[--i], arr[i] = arr[j], arr[j] = x);
        return arr;
    };

})(jQuery); //end of algorithm for controlling the shuffle function

---

您需要将totalBonus设置为一个函数，并在该函数中获取所发卡的奖金值

大概是这样的：

var totalBonus = function() {
    firstBonus = parseInt($('.Cad_menu').data( "value" ), 10);
    secondBonus = parseInt($('.Ce_menu').data( "value" ), 10);
    return firstBonus + secondBonus 
};

需要记住的一点是，由于您在单击时调用该函数，因此在另一个单击事件触发之前，它将无法添加新的奖金金额，因此它将始终落后于1。如果要在洗牌时更新总数，请不要将更新过程包装在单击事件中，而是将其包装在函数中，并在洗牌后调用它

---

value

不是

li

元素上的有效属性。您应该使用

数据值

。请阅读此处：您好，谢谢您的建议。我已经改变了，但同样的问题依然存在。太好了！非常感谢你。