如何通过点击<元素

how to pass value to javascript through clicking <li> element

本文关键字：元素 何通过      更新时间：2023-09-26

我有以下无序列表，它是通过JQuery .ajax从数据库动态填充的，其中有几个列表项是产品的名称。

<ul id="here">
<li>Product 1</li>
<li>Product 1</li>
<li>Product 1</li>
<li>Product 1</li>
<li>Product 1</li>
</ul>

我可以通过css中的鼠标事件悬停在这些上面，代码如下

li:hover {background: #ccc; cursor: pointer;}

填充<li>的javascript代码如下:

var pr= [Product1, Product2, Product3, Product4, Product5];
for (var option in pr){
var newLi = document.createElement("li");
newLi.innerHTML=pr[option];
$("#here").append(newLi);}

但是我想通过点击<li>元素时，通过Javascript或JQuery将<li>元素中的Product Name传递给另一个输入元素。我该怎么做呢?

既然我看到你是使用jQuery，你可以绑定ul的"click"事件，像这样:

$("#here").on("click", "li", function(evt) {
   $("#your_Input_Id").val(evt.target.innerHTML);
});

示例:jsfiddle: https://jsfiddle.net/bkbtert9/

由于li是动态创建的，因此您需要使用事件委托，因为<li>在执行代码时不会在dom上。这个示例代码应该适合您。试一试:

var clickLiData = "";
$("#here").on("click","li",function()
{
 clickLiData = $(this).html();
})

假设目标输入为文本。

<ul>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
</ul>
<input type="text" name="text" id="text">

所以这是想要的结果的javascript。

$("li").click(function() {
    $item = $(this).html();
    $("#text").val($item);
});
相关文章：