如何将div id，class作为参数传递给由onclick锚点标记调用的函数？ [英] How to pass div id, class as parameters to a function called by an anchor tag onclick?

查看：122
本文介绍了如何将div id，class作为参数传递给由onclick锚点标记调用的函数？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我试图将table id，div id和嵌套类名传递给一个泛型函数，用于整个程序代码。

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





这两个id（参数）都以引用的字符串形式传递，

  var tableid ='＃tble1200'
 var otherid ='div.class1 .total'
 
函数AddProduct （elment，event，tableid，otherid）
 {
 //做某事
 //超链接是删除
删除：'< a href =＃class =移除
 onclick =removeProduct（this，event，tableid，otherid）> X< / a>'
} 
 
 function removeProduct（element，event，tblid， othid）
 {
 //做某事
 $（tblid）.datagrid（'loadData'，data）; 
 $（othid）.html（'Total：$'+ subTotal）; 
}

我试着从本帖子的 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（{
名称：名称，
数量：1，
价格：价格，
删除：'< a href =＃ class =removeonclick =removeProduct（this，event）> X< / a>'
}）; 
} 
 add（）; 
 totalCost + =价格; 
 $（'＃cartcontent'）。datagrid（'loadData'，data）; 
 $（'div.cart .total'）。html（'Total：$'+ totalCost）; 
}


解决方案

您必须将购物车数据存储在 array 中， index 。并将索引传递给 addProduct 和 removeProduct 功能。对于购物车内容，请使用 class 而不是 id



更新后的代码如下：

HTML 

 <！doctype html> 
< html> 
< head> 
< title>多个购物车< / title> 
< link rel =stylesheettype =text / csshref =http://www.jeasyui.com/easyui/themes/default/easyui.css> 
< link rel =stylesheettype =text / csshref =http://www.jeasyui.com/easyui/themes/icon.css> 
< script type =text / javascriptsrc =http://code.jquery.com/jquery-1.6.1.min.js>< / script> 
< script type =text / javascriptsrc =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>气球< / p> 
< p>价格：$ 25< / p> 
< / div> 
< / a> 
< / li> 
< li> 
< a href =＃class =item> 
< img src =images / shirt2.gif/> 
< div> 
< p>感受< / p> 
< p>价格：$ 25< / p> 
< / div> 
< / a> 
< / li> 
< li> 
< a href =＃class =item> 
< img src =images / shirt3.gif/> 
< div> 
< p> Elephant< / p> 
< p>价格：$ 25< / p> 
< / div> 
< / a> 
< / li> 
< li> 
< a href =＃class =item> 
< img src =images / shirt4.gif/> 
< div> 
< p>邮票< / p> 
< p>价格：$ 25< / p> 
< / div> 
< / a> 
< / li> 
< li> 
< a href =＃class =item> 
< img src =images / shirt5.gif/> 
< div> 
< p> Monogram< / p> 
< p>价格：$ 25< / p> 
< / div> 
< / a> 
< / li> 
< li> 
< a href =＃class =item> 
< img src =images / shirt6.gif/> 
< div> 
< p>滚动< / p> 
< p>价格：$ 25< / p> 
< / div> 
< / a> 
< / li> 
< / ul> 
< div class =cart> 
< h1>购物车1< / h1> 
< div style =background：#fff> 
< table class =cartcontentfitColumns =truestyle =width：300px; height：auto;> 
< thead> 
< tr> 
< th field =namewidth = 140> Name< / th> 
< th field =quantitywidth = 60 align =right> Quantity< / th> 
< th field =pricewidth = 60 align =right> Price< / th> 
 < / tr> 
< / thead> 
< / table> 
< / div> 
< p class =total>总计：$ 0< / p> 
< h2>放下这里加入购物车< / h2> 
< / div> 
 
< div class =cart> 
< h1>购物车2< / h1> 
< div style =background：#fff> 
< table class =cartcontentfitColumns =truestyle =width：300px; height：auto;> 
< thead> 
< tr> 
< th field =namewidth = 140> Name< / th> 
< th field =quantitywidth = 60 align =right> Quantity< / th> 
< th field =pricewidth = 60 align =right> Price< / th> 
 < / tr> 
< / thead> 
< / table> 
< / div> 
< p class =total>总计：$ 0< / p> 
< h2>放下这里加入购物车< / h2> 
< / div> 
< / body> 
< / html>

CSS 

  .products {
 list-style：none; 
 margin-right：300px; 
 padding：0px; 
身高：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; 
颜色：＃c3c3c3; 
} 
 .cart {
 position：fixed; 
 top：0; 
 right：0; 
 width：300px; 
身高：50％; 
背景：#ccc; 
 padding：0px 10px; 
} 
 .cart：nth-​​child（奇数）{
 top：50％！important; 
} 
 h1 {
 text-align：center; 
颜色：＃555; 
} 
 h2 {
 position：absolute; 
 font-size：16px; 
 left：10px; 
 bottom：20px; 
颜色：＃555; 
} 
 .total {
 margin：0; 
 text-align：right; 
 padding-right：20px; 
}

JS 

  var data = []; 
 $ b $（function（）{
 $（'。cartcontent'）。datagrid（{
 singleSelect：true 
}）; 
 $（' （'.bat'）。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]））; 
} 
}）; 
}）; 
 
函数loadData（cartIndex，event）{
 var $ cart = $（'。cart：eq（'+ cartIndex +'）'）; 
 cart.find（'。cartcontent'）。datagrid（'loadData'，data [cartIndex]）; 
 $ cart.find（'。total'）。text（'Total：$'+ data [cartIndex] .total）; 
 
 $ b $ 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 =removeonclick =removeProduct（'+ cartIndex +'，this）> X< / a>'
}）; 
} 
 add（）; 
 data [cartIndex] .total + = price; 
 loadData（cartIndex）; 
} 
 
函数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--; 
休息; 
} 
} 
 data [cartIndex] .total  -  = price * quantity; 
 loadData（cartIndex）; 
}

JS小提琴


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

解决方案

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

这篇关于如何将div id，class作为参数传递给由onclick锚点标记调用的函数？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆