Question

我正在学习JSP和javascript，我在理解下面这个概念时遇到了困难。我试图使用for循环向HTML页面添加多个按钮，我想在Javascript中的一个函数中获取每个按钮的功能。请找到以下代码：

<%
BookDetails book=new BookDetails();
ArrayList<String> booktitle=book.Display();
System.out.println("In JSP page");
%>
<%for(int i=0;i<booktitle.size();i++){ %>
<h2>
<%=booktitle.get(i) %></h2><br>
<button onclick="cart()" class="books" >Add to cart</button>

<% } %>

<script>
function cart(){
    alert("Hi");
}
</script>

我的问题是“添加到购物车”按钮将为表格中的每个值创建。单击该按钮时，它应该仅检索该书名的名称。你可以用Javascript帮助我吗？

Answer 1

我的猜测是，基于代码，传递按钮编号可能很有用，因为您使用类名作为函数的参数。因此cart(1)之类的东西会返回该按钮。由于您使用的是JSP for循环，因此您应该能够获得按钮的ith元素。然后你可以使用

在JS中获取该特定元素

 document.getElementsByClassName('class-name')[i]

希望能回答你的问题!!

P.S我不认识JSP

Answer 2

因此，如果您想要添加图书的名称，您需要将其作为参数传递。

所以：

<button onclick="cart(booktitle.get(i))" class="books" >Add to cart</button>

或者你想要的书的任何名称，然后在你的脚本标签中：

function cart(nameOfBook){
    alert(nameOfBook);
}

Answer 3

您可以将booktitle.get(i)传递给cart函数，就像这样

<button onclick="cart('<%=booktitle.get(i).replace("'","\\'") %>')" class="books" >
    Add to cart
</button>

在这里，你需要逃避单引号（'），以确保你获得完整的书名。

Answer 4

您可以在包含所有按钮的容器元素上添加单击事件侦听器。在需要的地方添加自定义属性，并向添加或删除内容（具有行为）的按钮添加role自定义属性。

使用role比使用{更好}因为浏览器使用类来使元素以某种方式显示，并且如果他们想要使元素看起来与role不同，则可以由某人更改用于行为（作为您需要同意的惯例，因为它是用户定义的属性，浏览器不对这些属性做任何事情）。

＆＃13;

const functionToAddItem = event => {
  const itemID=event.target.getAttribute("x-item-id");
  console.log("this is add item",itemID);
}
const functionToRemoveItem = event => {
  const itemID=event.target.getAttribute("x-item-id");
  console.log("this is remove item",itemID);
}
document.body.querySelector(`[x-role="item-container"]`).addEventListener(
  "click",
  event=>{
    const action = event.target.getAttribute("x-role");
    switch(action){
      case("add-item") :
        functionToAddItem(event);
        break;
      case("remove-item") :
        functionToRemoveItem(event);
        break;
      default:
        //do nothing
    }
  }
)

＆＃13;

<div x-role="item-container">
  <button x-role="add-item" x-item-id="22">add</button>
  <button x-role="remove-item" x-item-id="22">remove</button>
</div>

＆＃13;

如何在javascript中使用循环创建的按钮使用相同的功能

4 个答案: