Fatal编程技术网
  • javascript/
  • Javascript 如何将divid、class作为参数传递给锚标记onclick调用的函数？

Javascript 如何将divid、class作为参数传递给锚标记onclick调用的函数？

javascript jquery html css

Javascript 如何将divid、class作为参数传递给锚标记onclick调用的函数？,javascript,jquery,html,css,anchor,Javascript,Jquery,Html,Css,Anchor,我试图将表id、div id和嵌套类名传递到一个通用函数中，该函数在程序代码中使用 棘手的部分是，此函数调用另一个函数，该函数包装在锚标记的onclick事件中。在添加两个附加参数之前，函数removietem工作，现在不再触发。这两个参数是使函数可重用所必需的 中间地带 两个ID（参数）都作为带引号的字符串传递 var tableid = "'#tble1200'" var otherid = "'div.class1 .total'" function AddProduct(elment,

我试图将表id、div id和嵌套类名传递到一个通用函数中，该函数在程序代码中使用

棘手的部分是，此函数调用另一个函数，该函数包装在锚标记的onclick事件中。在添加两个附加参数之前，函数
removietem
工作，现在不再触发。这两个参数是使函数可重用所必需的

中间地带

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

var tableid=“”#tble1200“
var otherid=“'div.class1.total'”
函数AddProduct（元素、事件、表ID、其他ID）
{
//做点什么
//超链接已被删除
删除：“”
}
功能移除产品（元素、事件、tblid、othid）
{
//做点什么
$（tblid）.datagrid（'loadData'，data）；
$（othid.html（'Total:$'+小计）；
}
我正在试用JSFIDLE中的代码：原始代码

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

功能添加产品（名称、价格）{
函数add（）{
对于（var i=0；i
functoidin AddProduct（elment、event、tableid、otherid）


function拼写不正确，应该是function
以下是一个可行的解决方案：


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



删除：“”
//后来
$（“#项-”+唯一项）。单击（功能（事件）{
removeProduct（此、事件、表id、购物车id）；
});


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

见：


现在我正在通过<代码> Table ID ID/代码>和<代码> CARTYID，您可以考虑通过实际的表和购物车，即<代码> $（“SytCARTFILATE”）和<代码> $（“.CART”）< /代码> 


请记住，
“.cart”
不是唯一的，因此如果您想要有两个列表，您需要使其唯一。
要使多个购物车独立工作，您必须使用
索引将购物车数据存储在和
数组中，并将
索引
传递给
添加产品
和
删除产品
函数以及购物车内容使用
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:$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>


JS


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



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



var数据=[]；
$（函数（）{
$（'.cartcontent'）.datagrid({
singleSelect:true
});
$（'.item'）。可拖动({
回复：对，
代理：“克隆”，
onStartDrag:函数（）{
$（this）.draggable（'options'）。游标='不允许'；
$（this）.draggable（'proxy'）.css（'z-index'，10）；
},
onStopDrag:函数（）{
$（this）.draggable（'options'）。游标='move'；
}
});
$（'.cart'）。可拖放({
onDragEnter:函数（e，源）{
$（源）.draggable（'options'）。游标='auto'；
},
onDragLeave：函数（e，源）{
$（源）.draggable（'options'）。游标='不允许'；
},
onDrop：函数（e，源）{
变量$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（'.cart'））[1]）；
}
});
});
函数loadData（cartIndex、事件）{
var$cart=$（'.cart:eq（'+cartIndex+'））；
$cart.find（'.cartcontent'）.datagrid（'loadData'，data[cartIndex]）；
$cart.find（'.total'）.text（'total:$'+数据[cartIndex].total）；
}
功能添加产品（目录索引、名称、价格）{
函数add（）{
如果（！数据[cartIndex]）{
数据[索引]={
长度：0，
总数：0，
行：[]
};
}
对于（var i=0；i


你能告诉我们这些函数是如何使用的吗？以字符串形式传递JS代码不是你想要做的事情-它可以工作，但你不能真正按照你想要的方式绑定作用域。@Halcyon我举了一个例子，没有一个cart，而是有多个cart。我不想有重复的addProduct和Remove产品功能。相反，我想对所有购物车重复使用这两个功能。这就是为什么我使用一种方法来参数化基础元素IDS。我并不真正关心
removietem
功能，我感兴趣的是
main
功能。你如何使用这个功能？@Halcyon我更新了我的帖子。如果JS代码不是以字符串形式传递的，我还有什么其他选择吗？您可以发布一个无效的代码吗？您可以使用id解释这个
吗？您可以稍后获取项并绑定范围侦听器。
关于
$（“#项-”+唯一\u nr）。单击
？这远远超出了我目前的理解。独特的\u nr
是如何工作的？还有一个问题是，它会被两辆车更新。因此，我可能不得不作为