How to pass div id, class as parameters to a funct

2019-09-21 00:09发布

站内问答 / JavaScript
685 3 6

I am trying to pass table id, div id and nested class names into a generic function that's used across the programme code.

The tricky part is, this function calls another function which is wrapped within an anchor tag's onclick event. Before adding the two additional parameters, the function removeItem worked and now no longer fires. These two parameters are required in order to make the function reusable.

The jsfiddle of the expected programme.

Both ids (the parameters) are passed as strings quoted, 

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);
}

I am trying out the code from this post's jsfiddle here. : The original code.

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);
    }

3条回答
手持菜刀，她持情操
2楼-- · 2019-09-21 00:53

For multiple carts to work independently you have to store cart data in and array with index. And pass the index to addProduct and removeProduct functions. And for cart content use class instead of id

Updated code is as below:

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:$25</p>
                    </div>
                </a>
            </li>
            <li>
                <a href="#" class="item">
                    <img src="images/shirt2.gif"/>
                    <div>
                        <p>Feeling</p>
                        <p>Price:$25</p>
                    </div>
                </a>
            </li>
            <li>
                <a href="#" class="item">
                    <img src="images/shirt3.gif"/>
                    <div>
                        <p>Elephant</p>
                        <p>Price:$25</p>
                    </div>
                </a>
            </li>
            <li>
                <a href="#" class="item">
                    <img src="images/shirt4.gif"/>
                    <div>
                        <p>Stamps</p>
                        <p>Price:$25</p>
                    </div>
                </a>
            </li>
            <li>
                <a href="#" class="item">
                    <img src="images/shirt5.gif"/>
                    <div>
                        <p>Monogram</p>
                        <p>Price:$25</p>
                    </div>
                </a>
            </li>
            <li>
                <a href="#" class="item">
                    <img src="images/shirt6.gif"/>
                    <div>
                        <p>Rolling</p>
                        <p>Price:$25</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: $0</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: $0</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

查看更多
0人赞 添加讨论(0) 举报
相关推荐>>
3楼-- · 2019-09-21 00:53

functoin AddProduct(elment, event, tableid, otherid)

functoin is spelled incorrectly, it should be function.

查看更多
0人赞 添加讨论(0) 举报
孤傲高冷的网名
4楼-- · 2019-09-21 01:01

Here is a solution that will work:

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);
});

Using the id you can fetch the item later and bind a scope listener.

See: http://jsfiddle.net/Vwu37/135/

Right now I'm passing table_id and cart_id, you could consider passing the actual table and cart, ie. $("#cartcontent") and $(".cart")

Keep in mind that ".cart" is not unique, so if you want to have two lists you will need to make it unique.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)