通過單擊按鈕ID值Javascript，JQuery從數組中獲取對象

Question

我有一個包含來自json的數據的電話數組：

var phones = [
        {
            "age": 0,
            "id": "motorola-xoom-with-wi-fi",
            "imageUrl": "img/phones/motorola-xoom-with-wi-fi.0.jpg",
            "name": "Motorola XOOM\u2122 with Wi-Fi",
            "snippet": "The Next, Next Generation\r\n\r\nExperience the future with Motorola XOOM with Wi-Fi, the world's first tablet powered by Android 3.0 (Honeycomb).",
            "price": 150
        },

該模板顯示為ul li：

<script type="text/template" id="listTemplate">

        <ul id = "list">
            <% for (var i=0; i< phones.length; i++) { %>
            <li><%=phones[i].age %><br>
            <%=phones[i].name%><br>
            <%=phones[i].id%><br>
            <img src="<%=phones[i].imageUrl%>"/><br>
            <%=phones[i].snippet%><br>
           <p>Price: <%=phones[i].price%></p>
                <button id="<%=phones[i].id%>" class="btn btn-success" type="submit">Buy</button>
            </li>
            <% } %>

    </ul>
</script> 

此模板將按​​鈕ID設置為電話的ID。 通過單擊此按鈕，我想從電話陣列中獲取“ id”，“ name”和“ price”。 為了達到這個目的，我編寫了以下代碼：

 $("#list").delegate("button",'click',function(){

   var purchase = $.grep(phones, function () {
        return this.id === phones.id;
    });

    console.log(purchase);
});

但是問題是它給了我來自phones數組的所有對象：

        [Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object]
0: Object

Answer 1

您的grep錯誤：

• delegate函數中的this為您提供了對clicked元素的引用
• 與現有phones對象數組比較之后
• grep之后，只有具有正確ID的特定phone

。

 $("#list").delegate("button",'click',function(){

    var purchase = $.grep(phones, function(current){
        console.info(current); // gives you phones one by one
        return current.id===this.id; // return only clicked one
    });

    console.log(purchase); // only array of clicked items
    console.log(purchase[0]); // phone with same id
    console.log(this); // clicked item

});