Question

我正在学习Backbonejs。我使用handlebars.js添加了动态元素的问题。这是我的HTML代码段：的 HTML

 <section class="single-item">
    {{#each [0]}} {{#if name}}
    <div class="card col s12">
        <form action="/productdetail" id="product-form">
            <div id="dettagliofromhomepage" class="card-image">
                {{#if img}}
                <img id="imgslide" src="{{img}}" data-prod="{{id}}"> {{else}}
                <img id="imgslide" src="img/no.jpg" data-prod="{{id}}"> {{/if}}
            </div>
            <div id="card-border" class="col s12">
                <div class="card-content col s6">
                    <p class="productTitle">{{name}}
                        <br> €{{price}}
                    </p>
                </div>
                <div class="card-action col s6 ">
                    <a id="bottone-ca" class="waves-effect waves-light btn light-green darken-3"><i class="material-icons">add_shopping_cart</i></a>
                </div>
            </div>
        </div>
        {{/if}} {{/each}}
    </section>

我想要主播＆＃34; bottone-ca＆＃34;输出节的元素的值＆＃34;单个项目＆＃34;点击。即我想在班级＆＃34;卡内容＆＃34;中检索<p>的值。我使用构造＆＃34;每个＆＃34;动态添加五个元素。但是，当我尝试使用operator＆＃34;这个＆＃34;在js上，我可以得到我添加的项目的第一个元素作为输出。这是我的JS片段：

define(function(require) {

var $ = require("jquery");
var Backbone = require("backbone");
var Products_homepage = require("models/Products_homepage");
var Products = require("models/Products");
var MyCollection = require("collections/Categories");
var localizzatoreView = require("views/pages/localizzatoreView");
var Utils = require("utils");
var productHomepage = require("models/productHomepage");
var onlineProduct = require("models/onlineProduct");
var saleProduct = require("models/saleProduct");


var MyView = Utils.Page.extend({
    constructorName: "MyView",
    model: Products_homepage,

    initialize: function() {
        this.template = Utils.templates.myview;
    },

    id: "myview",
    className: "i-g page",

    events: {
        "click #imgslide": "prodotto",
        "click #bottone-ca": "carrello"
    },

    render: function() {

        var that = this;

        var online = new onlineProduct();
        var sale2 = new saleProduct();
        var arraytest = [];
        var loca= localStorage.getItem("localizzazione");

        online.fetch({
            success: function() {

                arraytest[0]=(online.attributes);
                test= online.attributes;


                sale2.fetch({
                    success: function() {

                        $(that.el).html(that.template(arraytest));

                        that.startslider();
                        that.startnav();

                        return that;
                    }
                });
            }
        });

    },

    carrello: function(e) {
        var arraytemp = [];
        arraytemp = localStorage.getItem("Carrello");

        var idprod = $('#id_prodotto').val(),
        name = $("#name").val(),
        img = $("#img").val(),
        price = $("#price").val(),
        quantity = 1;

        /*Here i want to retrieve element that i clicked */

        var prod = new Products({
            name: name,
            id: idprod,
            img: img,
            price: parseFloat(price).toFixed(2),
            quantity: quantity,
            total: price * quantity
        });

        var Carrello = JSON.parse(localStorage["Carrello"]);
        Carrello.push(prod);
        localStorage["Carrello"] = JSON.stringify(Carrello);

        Backbone.history.navigate("basket", {
            trigger: true
        });

    }
});

对于代码段中的任何错误，请提前抱歉。我是JavaScript和骨干的新手。在此先感谢您的帮助。我使用Stack Overflow作为学习工具。

Answer 1

您总是会获得$('#id_prodotto')等全局选择器的第一个元素，因为您使用的是id选择器。 id在整个文档中应该是唯一的，浏览器返回第一个匹配项。您不应在动态模板中使用静态id。改为使用CSS类或其他属性。

也就是说，您可以通过$(event.currentTaget);之类的事件对象访问当前元素，并查询与事件目标相关的DOM，以便返回具有id的最近元素，例如{{ 1}}。

但仍然建议不要有多个具有相同$(event.currentTaget).closest('#card-border').find('p').text()的元素。

在click事件backbonejs上检索动态html元素

1 个答案: