javascript - 如何根据点击获取对应对象的值

Question

这是 JSFiddle 中的示例

<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<div></div>

JavaScript:

function Produit(nom, prix){
    this.nom = nom;
    this.prix = prix;
};

var apple = new Produit("apple", 0.30);
var banana = new Produit("banana", 0.03);
var pear = new Produit("pear", 0.35);
var kiwi = new Produit("kiwi", 0.40);

var produit = [apple,banana,pear,kiwi];

for(var i = 0; i < produit.length; i++){
    $('a').eq(i).html(produit[i].nom + '<br/>');
};

$('a').click(function(){
    var quantity = 0;
    quantity++;
    $('div').append(produit[0].nom + ' x ' + quantity + '<br/>');
});

所以在浏览器中，我们有四种水果。我想要的是:

1. 当我点击一个水果时，它会显示它的名称和数量，
2. 如果我点击苹果 2 次，它会显示“apple x 2”，
3. 然后，如果我点击 kiwi，它会在“apple x 2”下显示“kiwi x 1”
   因为我不知道该怎么做，所以在我的代码中，我只是放置了表的 0 索引，以向您展示它的样子。

我所知道的是:
- 对于 1，我需要 this替换 0在 produit[ ] ，但我不知道如何申请this .
- 对于 2 个，我需要一个计数器和一个 if/else ，相比之下，一旦点击一个水果，第二次点击它就会增加数量，而不是追加一个新的 <div> .
- 对于 3，它将位于 else 中与＃2，当水果不匹配时，做append 。

Answer 1

我会通过向您的 Produit 对象添加数量并向每个链接添加 ID 来稍微简化这个问题。您可以使用 $(this).text() 访问每个链接的文本值，但 ID 会更可靠，并且可以使代码更简单。我不确定您是否关心产品在 div 列表中显示的顺序...下面的解决方案只是迭代您的产品数组并显示所有大于 0 的产品的数量。

function Produit(nom, prix, qty){
  this.nom = nom;
  this.prix = prix;
  this.qty = qty;
};

var apple = new Produit("apple", 0.30, 0);
var banana = new Produit("banana", 0.03, 0);
var pear = new Produit("pear", 0.35, 0);
var kiwi = new Produit("kiwi", 0.40, 0);

var produit = [apple,banana,pear,kiwi];

for(var i = 0; i < produit.length; i++){
  $('a').eq(i).html(produit[i].nom + '<br/>').attr("id","produit_"+i);
};

$('a').click(function(){
  var id = $(this).attr("id").replace("produit_","");
  produit[id].qty++;
  var div = '';
  for(var i = 0; i<produit.length; i++){
    if(produit[i].qty>0)
      div += produit[i].nom + ' x ' + produit[i].qty + '<br/>'
  }
  $('div').html(div);
});

如果您只想附加商品的当前数量，您可以这样做:

$('a').click(function(){
  var id = $(this).attr("id").replace("produit_","");
  produit[id].qty++;
  $('div').append(produit[id].nom + ' x ' + produit[id].qty + '<br />')
});