如何将 div id，class 作为参数传递给锚标记 onclick 调用的函数？

Question

我正在尝试将 table id、div id 和嵌套的 class 名称传递到一个在整个程序代码中使用的通用函数中。

棘手的部分是，此函数调用另一个包含在锚标记的 onclick 事件中的函数。在添加两个附加参数之前，函数 removeItem 起作用，现在不再触发。为了使函数可重用，需要这两个参数。

的 jsfiddle

两个 id（参数）都作为带引号的字符串传递，

var tableid = "'#tble1200'"
var otherid = "'div.class1 .total'"

function AddProduct(elment, event, tableid, otherid)
{
   //do something
   //the hyperlink is remove
   remove: '<a href="#" class="remove" 
   onclick="removeProduct(this, event,tableid,otherid)">X</a>'
}

function removeProduct(element, event, tblid, othid)
{
    //do something
    $(tblid).datagrid('loadData', data);
    $(othid).html('Total: $'+subTotal);
}

我正在试用 this post's jsfiddle here. 中的代码：原始代码。

function addProduct(name,price){
        function add(){
            for(var i=0; i<data.total; i++){
                var row = data.rows[i];
                if (row.name == name){
                    row.quantity += 1;
                    return;
                }
            }
            data.total += 1;
            data.rows.push({
                name:name,
                quantity:1,
                price:price,
                remove: '<a href="#" class="remove" onclick="removeProduct(this, event)">X</a>'
            });
        }
        add();
        totalCost += price;
        $('#cartcontent').datagrid('loadData', data);
        $('div.cart .total').html('Total: $'+totalCost);
    }

Answer 1

functoin AddProduct(elment, event, tableid, otherid)

functoin 拼写错误，应该是function.

Answer 2

这是一个可行的解决方案：

remove: '<a href="#" id="item-' + unique_nr + '" class="remove">X</a>'

// later

$("#item-" + unique_nr).click(function (event) {
    removeProduct(this, event, table_id, cart_id);
});

使用 id 您可以稍后获取该项目并绑定范围侦听器。

参见：http://jsfiddle.net/Vwu37/135/

现在我正在传递 table_id 和 cart_id，您可以考虑传递实际的 table 和购物车，即。 $("#cartcontent") 和 $(".cart")

请记住 ".cart" 不是唯一的，因此如果您想拥有两个列表，则需要使其唯一。

Answer 3

要使多个购物车独立工作，您必须将购物车数据存储在 array 和 index 中。并将 index 传递给 addProduct 和 removeProduct functions。对于购物车内容，请使用 class 而不是 id

更新后的代码如下：

HTML

<!doctype html>
<html>
    <head>
        <title>Multiple Carts</title>
        <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
        <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
        <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
    </head>
    <body style="margin:0;padding:0;height:100%;background:#fafafa;">
        <ul class="products">
            <li>
                <a href="#" class="item">
                    <img src="images/shirt1.gif"/>
                    <div>
                        <p>Balloon</p>
                        <p>Price:</p>
                    </div>
                </a>
            </li>
            <li>
                <a href="#" class="item">
                    <img src="images/shirt2.gif"/>
                    <div>
                        <p>Feeling</p>
                        <p>Price:</p>
                    </div>
                </a>
            </li>
            <li>
                <a href="#" class="item">
                    <img src="images/shirt3.gif"/>
                    <div>
                        <p>Elephant</p>
                        <p>Price:</p>
                    </div>
                </a>
            </li>
            <li>
                <a href="#" class="item">
                    <img src="images/shirt4.gif"/>
                    <div>
                        <p>Stamps</p>
                        <p>Price:</p>
                    </div>
                </a>
            </li>
            <li>
                <a href="#" class="item">
                    <img src="images/shirt5.gif"/>
                    <div>
                        <p>Monogram</p>
                        <p>Price:</p>
                    </div>
                </a>
            </li>
            <li>
                <a href="#" class="item">
                    <img src="images/shirt6.gif"/>
                    <div>
                        <p>Rolling</p>
                        <p>Price:</p>
                    </div>
                </a>
            </li>
        </ul>
        <div class="cart">
            <h1>Shopping Cart 1</h1>
            <div style="background:#fff">
                <table class="cartcontent" fitColumns="true" style="width:300px;height:auto;">
                    <thead>
                        <tr>
                            <th field="name" width=140>Name</th>
                            <th field="quantity" width=60 align="right">Quantity</th>
                            <th field="price" width=60 align="right">Price</th>
                            <th field="remove" width=60 align="right">Remove</th>
                        </tr>
                    </thead>
                </table>
            </div>
            <p class="total">Total: [=10=]</p>
            <h2>Drop here to add to cart</h2>
        </div>

        <div class="cart">
            <h1>Shopping Cart 2</h1>
            <div style="background:#fff">
                <table class="cartcontent" fitColumns="true" style="width:300px;height:auto;">
                    <thead>
                        <tr>
                            <th field="name" width=140>Name</th>
                            <th field="quantity" width=60 align="right">Quantity</th>
                            <th field="price" width=60 align="right">Price</th>
                            <th field="remove" width=60 align="right">Remove</th>
                        </tr>
                    </thead>
                </table>
            </div>
            <p class="total">Total: [=10=]</p>
            <h2>Drop here to add to cart</h2>
        </div>
    </body>
</html>

CSS

.products{
    list-style:none;
    margin-right:300px;
    padding:0px;
    height:100%;
}
.products li{
    display:inline;
    float:left;
    margin:10px;
}
.item{
    display:block;
    text-decoration:none;
}
.item img{
    border:1px solid #333;
}
.item p{
    margin:0;
    font-weight:bold;
    text-align:center;
    color:#c3c3c3;
}
.cart{
    position:fixed;
    top: 0;
    right:0;
    width:300px;
    height:50%;
    background:#ccc;
    padding:0px 10px;
}
.cart:nth-child(odd){
    top:50% !important;
}
h1{
    text-align:center;
    color:#555;
}
h2{
    position:absolute;
    font-size:16px;
    left:10px;
    bottom:20px;
    color:#555;
}
.total{
    margin:0;
    text-align:right;
    padding-right:20px;
}

JS

var data = [];

$(function () {
    $('.cartcontent').datagrid({
        singleSelect: true
    });
    $('.item').draggable({
        revert: true,
        proxy: 'clone',
        onStartDrag: function () {
            $(this).draggable('options').cursor = 'not-allowed';
            $(this).draggable('proxy').css('z-index', 10);
        },
        onStopDrag: function () {
            $(this).draggable('options').cursor = 'move';
        }
    });
    $('.cart').droppable({
        onDragEnter: function (e, source) {
            $(source).draggable('options').cursor = 'auto';
        },
        onDragLeave: function (e, source) {
            $(source).draggable('options').cursor = 'not-allowed';
        },
        onDrop: function (e, source) {
            var $source = $(source);
            var name = $source.find('p:eq(0)').text();
            var price = $source.find('p:eq(1)').text();
            addProduct($('.cart').index($(e.currentTarget)), name, parseFloat(price.split('$')[1]));
        }
    });
});

function loadData(cartIndex, event) {
    var $cart = $('.cart:eq(' + cartIndex + ')');
    $cart.find('.cartcontent').datagrid('loadData', data[cartIndex]);
    $cart.find('.total').text('Total: $' + data[cartIndex].total);
}

function addProduct(cartIndex, name, price) {
    function add() {
        if (!data[cartIndex]) {
            data[cartIndex] = {
                length: 0,
                total: 0,
                rows: []
            };
        }
        for (var i=0; i < data[cartIndex].length; i++) {
            var row = data[cartIndex].rows[i];
            if (row.name === name) {
                row.quantity += 1;
                return;
            }
        }
        data[cartIndex].length++;
        data[cartIndex].rows.push({
            name: name,
            quantity: 1,
            price: price,
            remove: '<a href="#" class="remove" onclick="removeProduct(' + cartIndex + ', this)">X</a>'
        });
    }
    add();
    data[cartIndex].total += price;
    loadData(cartIndex);
}

function removeProduct(cartIndex, el) {
    var tr = $(el).closest('tr');
    var name = tr.find('td[field=name]').text();
    var price = tr.find('td[field=price]').text();
    var quantity = tr.find('td[field=quantity]').text();
    for(var i = 0; i < data[cartIndex].length; i++){
        var row = data[cartIndex].rows[i];
        if (row.name == name) {
            data[cartIndex].rows.splice(i, 1);
            data[cartIndex].length--;
            break;
        }
    }
    data[cartIndex].total -=  price * quantity;
    loadData(cartIndex);
}

JS Fiddle

如何将 div id，class 作为参数传递给锚标记 onclick 调用的函数？

How to pass div id, class as parameters to a function called by an anchor tag onclick?

html

javascript

css

anchor

jquery