分类导航
程序笔记程序问答

试图将项目 ID 分配给我的另一个函数

程序问答   发布时间：2022-06-02  发布网站：大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了试图将项目 ID 分配给我的另一个函数，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决试图将项目 ID 分配给我的另一个函数？

开发过程中遇到试图将项目 ID 分配给我的另一个函数的问题如何解决？下面主要结合日常开发的经验，给出你关于试图将项目 ID 分配给我的另一个函数的解决方法建议，希望对你解决试图将项目 ID 分配给我的另一个函数有所启发或帮助；

我正在试用我的新购物车。 .我知道这是一个非常基本的问题，但我坚持在这里请澄清我的疑问。

我应该将项目 ID 获取到我的另一个函数吗？ 如果我在 addto_cart 函数中提醒这个 ID 值，它会显示 [object MouseEvent] 如何将我的物品的 ID 获取到另一个我的函数（addto_cart）

<header class="page-header header container-fluID">
<div class="row">
<div class="col-md-9"></div>
<div class="col-md-3 cart_icon"><img src="images\shopPing_64.png" wIDth="50px" height="50px"></div>
</div>
</header>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="icecream_Box">
<ul ID="item_List">
</ul>
</div>
</div>
</div>
</div>



const items=[
{
    ID:1,name:"vannila Ice cream",price:80,image_url:"images/vannila_ice.jpg"

},{
    ID:2,name:"Choclate Ice cream",price:120,image_url:"images/Chocolate-ice.jpg"

},{
    ID:3,name:"StrawBerry Ice cream",price:100,image_url:"images/strawBerry_ice.jpg"

},{
    ID:4,name:"Caramel Ice cream",price:180,image_url:"images/caramel.jpg"

}



];

var ulvar=document.getElementByID("item_List");
items.forEach(loop_item);
function loop_item(item,index)
{
    //document.getElementsByClassname("icecream_Box")[0].INNERHTML=item.name;
    var btn_add=document.createElement("button");
    var List=document.createElement("li");
    List.INNERHTML=`<img class="item_images" src="${item.image_url}" wIDth="200px" Height="200px">
    <div>${item.name}</div>
    <div>Rs.${item.price}</div>
    <div ID="ID_get">${item.ID}</div>
    <button type="button" class="btn-primary shop_btn">SHOP</button>
    `;
    
    ulvar.appendChild(List);
    List.classname+="List_cls";
    
    console.log(item.name);
}
var btn=document.getElementsByClassname("shop_btn");
for (var i = 0 ; i < btn.length; i++) {
 btn[i].addEventListener("click",addto_cart);  
}

function addto_cart(ID)
{

alert(ID);
}

我的完整代码在这里 请看这个 https://codepen.io/pavisaran/pen/poeEvNv

解决方法

事件处理程序将 event 作为参数。要检索触发事件的元素，请使用 event.target。

function addto_cart(event)
{
  alert(event.target.id);
}

在您的特定情况下，您需要将 DOM 向上爬到按钮的父级，然后找到 ID 为 <div> 的 id_get 并读取其文本内容。

使用 closest 查找具有给定选择器的父元素，使用 querySelector 轻松查找其中的给定元素。

const items = [{
    id: 1,name: "vannila Ice cream",price: 80,image_url: "https://picsum.photos/seed/product1/200"
  },{
    id: 2,name: "Choclate Ice cream",price: 120,image_url: "https://picsum.photos/seed/product2/200"
  },{
    id: 3,name: "Strawberry Ice cream",price: 100,image_url: "https://picsum.photos/seed/product3/200"
  },{
    id: 4,name: "Caramel Ice cream",price: 180,image_url: "https://picsum.photos/seed/product4/200"
  }
];

const ulvar = document.getElementById("item_list");
items.forEach(loop_item);

function loop_item(item,index) {
  //document.getElementsByClassName("icecream_box")[0].innerHTML=item.name;
  const btn_add = document.createElement("button");
  const list = document.createElement("li");
  list.innerHTML = `<img class="item_images" src="${item.image_url}" width="200px" Height="200px">
    <div>${item.name}</div>
    <div>Rs.${item.price}</div>
    <div id="id_get">${item.id}</div>
    <button type="button" class="btn-primary shop_btn">SHOP</button>
    `;

  ulvar.appendChild(list);
  list.className += "list_cls";

  console.log(item.name);
}
const btn = document.getElementsByClassName("shop_btn");
for (let i = 0; i < btn.length; i++) {
  btn[i].addEventListener("click",addto_cart);
}

function addto_cart(event) {
  const btn = event.target;
  const div = btn.closest('li').querySelector('#id_get');
  alert(div.textContent);
}
<header class="page-header header container-fluid">
  <div class="row">
    <div class="col-md-9"></div>
    <div class="col-md-3 cart_icon"><img src="https://p.kindpng.com/picc/s/714-7147174_png-file-svg-transparent-background-shopping-cart-icon.png" width="50px" height="50px"></div>
  </div>
</header>
<div class="container">
  <div class="row">
    <div class="col-md-12">
      <div class="icecream_box">
        <ul id="item_list">
        </ul>
      </div>
    </div>
  </div>
</div>

,

您可以在创建按钮时在按钮上添加数据属性 (data-id-clicked="${item.id}") 并通过单击按钮获取 id

<button type="button" class="btn-primary shop_btn" data-id-clicked="${item.id}">SHOP</button>

访问 ID

function addto_cart(e) {
    const id = e.target.dataset.idClicked;
    alert(id);
}


const items = [{
    id: 1,image_url: "images/vannila_ice.jpg",},image_url: "images/Chocolate-ice.jpg",image_url: "images/strawberry_ice.jpg",image_url: "images/caramel.jpg",];

var ulvar = document.getElementById("item_list");
items.forEach(loop_item);

function loop_item(item,index) {
  //document.getElementsByClassName("icecream_box")[0].innerHTML=item.name;
  var btn_add = document.createElement("button");
  var list = document.createElement("li");
  list.innerHTML = `<img class="item_images" src="${item.image_url}" width="200px" Height="200px">
    <div>${item.name}</div>
    <div>Rs.${item.price}</div>
    <div id="id_get">${item.id}</div>
    <button type="button" class="btn-primary shop_btn" data-id-clicked="${item.id}">SHOP</button>
    `;

  ulvar.appendChild(list);
  list.className += "list_cls";

  console.log(item.name);
}
var btn = document.getElementsByClassName("shop_btn");
for (var i = 0; i < btn.length; i++) {
  btn[i].addEventListener("click",addto_cart);
}

function addto_cart(e) {
  const id = e.target.dataset.idClicked;
  alert(id);
}
<header class="page-header header container-fluid">
  <div class="row">
    <div class="col-md-9"></div>
    <div class="col-md-3 cart_icon"><img src="images\shopping_64.png" width="50px" height="50px"></div>
  </div>
</header>
<div class="container">
  <div class="row">
    <div class="col-md-12">
      <div class="icecream_box">
        <ul id="item_list">
        </ul>
      </div>
    </div>
  </div>
</div>

,

您可以将当前目标 index 的 item 传递给函数，并在获取具有该索引的项目后获取项目 ID。

查看代码：

const items = [{
    id: 1,image_url: "images/vannila_ice.jpg"

  },image_url: "images/Chocolate-ice.jpg"

  },image_url: "images/strawberry_ice.jpg"

  },image_url: "images/caramel.jpg"

  }



];

var ulvar = document.getElementById("item_list");
items.forEach(loop_item);

function loop_item(item,index) {
  //document.getElementsByClassName("icecream_box")[0].innerHTML=item.name;
  var btn_add = document.createElement("button");
  var list = document.createElement("li");
  list.innerHTML = `<img class="item_images" src="${item.image_url}" width="200px" Height="200px">
    <div>${item.name}</div>
    <div>Rs.${item.price}</div>
    <div id="id_get">${item.id}</div>
    <button type="button" class="btn-primary shop_btn">SHOP</button>
    `;

  ulvar.appendChild(list);
  list.className += "list_cls";

}
var btn = document.querySelectorAll(".shop_btn");
for (let i = 0; i < btn.length; i++) {
  btn[i].addEventListener("click",e => {
    addto_cart(i)
  });
}

function addto_cart(ind) {
  //want to add the items into my cart if i click the shop button
  console.log(items[ind])
  console.log('ID: ',items[ind].id)
}
header
{
    height: 56px;
    /* //background-color: #db4cff; */
    background:linear-gradient(to right,#45166a,#83157b 75%,#bc158a);
}
.cart_icon
{
    float:right;
    
}
li
{
    list-style:none;
    float:left;
}
.list_cls
{
    padding:0px 20px;
}
.shop_btn
{
    background-color: #72f4bf;
    color: #45166a;
    border: none;
}
<header class="page-header header container-fluid">
<div class="row">
<div class="col-md-9"></div>
<div class="col-md-3 cart_icon"><img src="images\shopping_64.png" width="50px" height="50px"></div>
</div>
</header>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="icecream_box">
<ul id="item_list">

</ul>
</div>
</div>
</div>
</div>

Working Fiddle

,

你可以给你的 eventListener 添加参数

const items=[
{
    id:1,name:"vannila Ice cream",price:80,image_url:"images/vannila_ice.jpg"

},{
    id:2,name:"Choclate Ice cream",price:120,image_url:"images/Chocolate-ice.jpg"

},{
    id:3,name:"Strawberry Ice cream",price:100,image_url:"images/strawberry_ice.jpg"

},{
    id:4,name:"Caramel Ice cream",price:180,image_url:"images/caramel.jpg"

}



];

var ulvar=document.getElementById("item_list");
items.forEach(loop_item);
function loop_item(item,index)
{
    //document.getElementsByClassName("icecream_box")[0].innerHTML=item.name;
    var btn_add=document.createElement("button");
    var list=document.createElement("li");
    list.innerHTML=`<img class="item_images" src="${item.image_url}" width="200px" Height="200px">
    <div>${item.name}</div>
    <div>Rs.${item.price}</div>
    <div id="id_get">${item.id}</div>
    <button type="button" class="btn-primary shop_btn">SHOP</button>
    `;
    
    ulvar.appendChild(list);
    list.className+="list_cls";
    
    console.log(item.name);
}
var btn=document.querySelectorAll(".shop_btn");
btn.forEach((f,index)=>{
 f.addEventListener("click",function(){
    addto_cart(items[index]);
},false)
})
console.log(btn)
for (var i = 0 ; i < btn.length; i++) {
;  

}

function addto_cart(item)
{
//want to add the items into my cart if i click the shop button

  alert(item.name)
  //console.log(e)
//alert(id);    
}
header
{
    height: 56px;
    /* //background-color: #db4cff; */
    background:linear-gradient(to right,#bc158a);
}
.cart_icon
{
    float:right;
    
}
li
{
    list-style:none;
    float:left;
}
.list_cls
{
    padding:0px 20px;
}
.shop_btn
{
    background-color: #72f4bf;
    color: #45166a;
    border: none;
}
<header class="page-header header container-fluid">
<div class="row">
<div class="col-md-9"></div>
<div class="col-md-3 cart_icon"><img src="images\shopping_64.png" width="50px" height="50px"></div>
</div>
</header>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="icecream_box">
<ul id="item_list">

</ul>
</div>
</div>
</div>
</div>

大佬总结

以上是大佬教程为你收集整理的试图将项目 ID 分配给我的另一个函数全部内容，希望文章能够帮你解决试图将项目 ID 分配给我的另一个函数所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
标签：
猜你在找的程序问答相关文章
其他相关热搜词更多
JavaScript字符串对象运算符count异步uisqloraclejsonpromisehttphttpsaxios常量forwhile循环Length算法