Question

我使用小部件（来自此代码）

开发了gridview应用程序

https://github.com/pablorr18/TiDynamicGrid

我已根据客户要求修改了代码。现在，如果我想点击列表项上的查看购物车按钮，它将提醒消息，如“被点击”。但我尝试了各种方式。但我找不到解决方案。任何人都可以向我解释我们是如何编写代码的。

我在我的应用程序中遵循以下代码：

var items = [];
var showGridItemInfo = function(e){
    alert(&quot;Onclick the row&quot;);
}; 

var delay = (OS_ANDROID) ? 1000:500;

$.tdg.init({
    columns:3,
    space:5,
    delayTime:delay,
    gridBackgroundColor:'#e1e1e1',
    itemBackgroundColor:'#fff',
    itemBorderColor:'transparent',
    itemBorderWidth:0,
    itemBorderRadius:5,
    onItemClick: showGridItemInfo
});

function createSampleData(){
    var sendit = Ti.Network.createHTTPClient({ 
        onerror: function(e){ 
            Ti.API.debug(e.error); 
            alert('There was an error during the connection'); 
        }, 
        timeout:10000, 
    });           
    sendit.open('GET', url+'android_livedev/client/test.php?action=listitems&amp;categoryid='+subcategorylist_category_id+'&amp;productmin=0&amp;productmax=50');  

    sendit.send(); 
    sendit.onload = function(){ 
        var response = JSON.parse(this.responseText); 
        if(response[0].success == 0){
            alert(&quot;No Products Found&quot;);
        }
        else {
            items = [];   
            for (var x=0;x&lt;response[0].data.length;x++){
                var view = Alloy.createController('item_layout',{
                    image:imageurl+response[0].data[x].thumb_image,
                    product:response[0].data[x].product,
                    productprice:&quot;$&quot;+&quot; &quot;+response[0].data[x].price,
                    onItemClick: addcart,
                }).getView();
                var values = {
                    product: response[0].data[x].product,
                    image: response[0].data[x].thumb_image,
                    productid : response[0].data[x].productid,
                };
                items.push({
                    view: view,
                    data: values
                });
            };
            $.tdg.addGridItems(items);
            reateSampleData();

            $.tdg.clearGrid();
            $.tdg.init({
                columns:nColumn,
                space:nSpace,
                delayTime:delay,
                gridBackgroundColor:'#e1e1e1',
                itemHeightDelta: 0,
                itemBackgroundColor:'#fff',
                itemBorderColor:'transparent',
                itemBorderWidth:0,
                itemBorderRadius:5,
                onItemClick: showGridItemInfo
            });
            createSampleData();

        });

        $.win.open();

item_layout.xml代码如下所示：

<Alloy> 
    <View id="mainView"> 
        <ImageView id="thumb"/> 
        <Label id="product"></Label> 
        <Label id="productprice"></Label> 
        <Button id="addcart" onClick="additemtocart"/> 
    </View>
</Alloy>

修改

现在从指定的视图中获取视图和按钮ID。但如果我试图点击按钮意味着无法做到。你可以查看我的代码并给出解决方案。

我添加了以下代码：

var view = Alloy.createController('item_layout',{
        image:imageurl+response[0].data[x].thumb_image,
        product:response[0].data[x].product,
        productprice:"$"+" "+response[0].data[x].price
    }).getView();
    var controller = Alloy.createController('item_layout'); 
     var button = controller.getView('addcart');
    button.addEventListener('click', function (e){
    alert("click");
     Ti.API.info('click');
    });

Answer 1

首先将ID切换到类，因为它们是非唯一的。如果必须，只使用ID。其次，尝试这样的事情：

尝试这样的事情：

$('.addCart').click(function() {
    var item = $(this).silblings('.product').text;
    addItemToCart(item);
});

更好的是，在购物车按钮中添加data-productId属性，您可以执行以下操作：

$('.addCart').click(function() {
    var itemId = $(this).attr('data-productId');
    addItemToCart(itemId);
});

这是更好的，因为您只需要购物车按钮在屏幕上。

所有这些说明，当页面上没有javascript时，你可能还需要包含一个将项目添加到购物车的后备。

我们如何在钛网格视图项中实现Onclick功能

1 个答案: