Question

我需要动态创建包含信息的可折叠面板。从这些面板中我想总计每个面板中包含的数字并将其输出。

这非常像购物车。我需要让用户删除他们想要的任何面板，然后重新输出输出。

如果我使用下面的代码，如果您从上到下点击“删除”直到最后一个面板，则所有代码都按预期工作。最后一个面板总是需要两次点击。因此，如果从底部开始，所有面板都需要两次点击。

我尝试了很多stopPropagation的变化，认为这是问题，但无济于事。可能会发生什么想法？

不过，我确实有一个jsFiddle文件，http://jsfiddle.net/zorfox/8x2me991/但是，删除链接什么也没做，我还没弄清楚原因。这就是为什么我在下面添加了整个代码。

<!DOCTYPE html>
<html>
<head>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</head>

<script>
    mytotal = 0;
    cart = [{
        name: 'John',
        age: 1
    }, {
        name: 'Mary',
        age: 2
    }, {
        name: 'Mike',
        age: 3
    }, {
        name: 'Sam',
        age: 4
    }, ];

    function cartdelete(name) {
        for (x = 0; x < cart.length; ++x) {
            for (var key in cart[x]) {
                if (cart[x][key] == name) {
                    // alert('found it');
                    cart.splice(x, 1);
                }; //endif
            }; // endfor 
        }; //endfor 
    }; // endfunc

    function deletecart(id, name, link) {
        cartdelete(name);
        mytotal = 0;
        for (x = 0; x < cart.length; x++) {
            mytotal = mytotal + cart[x].age;
        }
        $('#total').text('Cart Count: ' + cart.length + ' You deleted: ' + name  +
            'Total: ' + mytotal);
        $('#' + id).remove();
    };

    $(document).ready(function () {
        // Dynamically create several panels
        for (x = 0; x < cart.length; x++) {
            $("#total").before("<div  id='cart" + x + "'" + "class='panel panel-default' style='width:50%;'>" +
              "<div class='panel-heading' >" +
              "<h4 class='panel-title'>" +
              "<a data-toggle='collapse' data-parent='#accordion' href='#" + x + "'>" +
              " <strong>" + cart[x].name + ' is ' + cart[x].age + 
              " </strong> <span class='caret'></span></a>" +
              "</h4>" +
              "<a class='tmplink pull-right' id='link" + x + "' href='#" + x +
              "' onclick=" + '"' + "deletecart('cart" +
              x + "' , '" + cart[x].name + "')" +
              '"' + "> remove </a>" +
              "</div>" +
              " <div id='" + x + "'" + " class='panel-collapse collapse'>" + "<div class='panel-body'>" +
              "<table id='table " + x + "'" +
              "<tr> <td>" + cart[x].name + "</td><td>" + cart[x].age + "</td></tr>" +
              "</table>" +
              "</div>" +
              "</div>" +
              "</div>");
        }; // end for loop
        for (x = 0; x < cart.length; x++) {
            mytotal = mytotal + cart[x].age;
        }
        $('#total').text('Cart Count: ' + cart.length + ' Total: ' + mytotal);
    }); //end document.ready
</script>

    <style>
        table,
    td {
      border: 1px solid black;
      width: 50%
    }
    .tmplink {
      position: relative;
      top: -15px;
    }
}
    </style>

<body>
<div id="total">
  Cart Count: 0
</div>
<br>

<button onclick="alert('Cart count: ' + cart.length);">Cart Count</button>

</body>
</html>

Bootstrap可折叠面板问题

0 个答案: