如何根据单击访问相应对象的值

How to access a corresponding object's value according to the click

本文关键字：对象访问何根单击更新时间：2023-09-26

这是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/>');
});

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

当我点击一个水果时，它会显示它的名称和数量，
如果我点击苹果 2 次，它会显示"苹果 x 2"，
然后，如果我单击猕猴桃，它将在"Apple x 2"
下显示"猕猴桃x 1"由于我不知道该怎么做，在我的代码中，我只是放置了表的 0 索引，以向您展示它的外观。

我所知道的是：
- 对于 1，我需要一个this来替换produit[ ]中的0，但我不知道如何应用this.
- 对于 2，我需要一个计数器和一个if/else，为了进行比较，一旦点击水果，第二次点击它会增加数量，而不是附加新的<div>。
- 对于 3，它将与 #2 在else中，当水果不匹配时，请执行append。

我会稍微简化这个问题，方法是向 Produit 对象添加一个数量并向每个链接添加一个 ID。您可以使用 $（this）.text（）访问每个链接的文本值，但 ID 将更可靠，并使代码更简单。我不确定您是否关心产品在您的部门列表中显示的顺序......下面的解决方案只是遍历您的产品数组，并显示所有大于 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 />')
});

您需要将结果写入数组，然后重写div 内容。使用.html()而不是.append()

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 = {};
a.nameArray = [];
a.valueArray = [];
myString = "";
$('a').click(function(){
  var itemClicked = this.innerHTML.replace("<br>","");
  //if the nameArray does NOT contain the product, add it, and set value to 1.  If it does contain the product, increment value by 1.
  if(a.nameArray.indexOf(itemClicked)==-1){
    a.nameArray.push(itemClicked);
    a.valueArray.push(1);
  } else {
    a.valueArray[a.nameArray.indexOf(itemClicked)] += 1;
  }
  //write the string based on contents of arrays
  myString = "";
  for(var i=0; i<a.nameArray.length;i++){
    myString += a.nameArray[i] + " x " + a.valueArray[i] + "<br/>";
  }
  //Rewrite the contents of the html div.
    $('div').html(myString);
});

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

https://jsfiddle.net/s02ch9mt/1/

首先，我将向 Produit 类添加一个"quantity"属性并将其初始化为零。

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

现在，您可以通过每次点击更改此产品管道的数量：

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

让我知道这是否适合您！

- 阿达

假设每个元素都有一个属性，使其具有自己的数量计数您可以为当前单击的元素提供"this"

在定位元素中使用计数属性对数量进行计数以及您在此处更新的代码

<a href="#" count=0></a>
<a href="#" count=0></a>
<a href="#" count=0></a>
<a href="#" count=0></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 currentElement = $(this);
  var quantity = currentElement.attr('count');
  quantity++;
  currentElement.attr('count',quantity);
  $('div').append(currentElement.text() + ' x ' + quantity + '<br/>');
});

jSfiddle

您可以使用过滤器功能，例如：

function Produit(nom, prix){
  this.nom = nom;
  this.prix = prix;
  this.quantity = 0;
};
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];
$(function () {
  for(var i = 0; i < produit.length; i++){
    $('a').eq(i).text(produit[i].nom).append('<br>');
    
    // create the elements and set visibility to none
    $('div').append('<p id="' + produit[i].nom + '" style="display:none;">' + produit[i].nom + ' x ' + produit[i].quantity + '</p>');
  };
  $('a').click(function(e){
    
    // get the selected fruit object from produit
    var objSelected = produit.filter(function(val, index) {
      return val.nom == e.target.textContent;
    });
    
     var para = $('#' + objSelected[0].nom);
     if (para.length == 1) {
       para.text(objSelected[0].nom + ' x ' + objSelected[0].quantity).toggle(true);
     }
     objSelected[0].quantity += 1;
  });
});

<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<div></div>