Question

我想点击div或img并获取其中p的文本以进入另一个列表。

 <div onClick="add_basket(this);" class="menu-item burger"> <img  src="img\McDo\bigmac.png"> <p>Big Mac</p> </div>
  <div onClick="add_basket(this);" class="menu-item burger"> <img  src="img\McDo\doubleqp.png"> <p>Double Quarter Pounder</p> </div>


   <ul class="basket" id="basket-mcdo">
    <li>Order</li>
    <li>Mcdo</li>
  </ul>

我有很多其他类似的东西，这是我的功能，但它没有工作它添加＆＃34;未定义＆＃34;是列表

function add_basket(that) {
    $(".basket").append("<li>"+that+"</li>");
}

非常感谢你的帮助:)）

Answer 1

您使用处理程序jQuery发出请求 JS

$(".menu-item").click(function(){
   $(".basket").append("<li>"+$(this).children("p").text()+"</li>");
});

HTML

 <div class="menu-item burger"> <img  src="img\McDo\bigmac.png"> <p>Big Mac</p> </div>
  <div class="menu-item burger"> <img  src="img\McDo\doubleqp.png"> <p>Double Quarter Pounder</p> </div>

您可以在此处jsFiddle

进行测试

Answer 2

您可以使用以下代码获取文本

HTML：

<div class="menu-item burger">  
 <p class="item-name">Big Mac</p> 
</div>
<div class="menu-item burger"> 
 <p class="item-name">Double Quarter Pounder</p> 
</div>

JS：

$(".item-name").click(function add_basket(that) {
    $(".basket").append("<li>"+that.target.innerHTML+"</li>");
});

here解释了代码无效的原因。

永远不要使用.onclick（）或用户脚本中的类似属性！（它的   在常规网页中也很糟糕。）

原因是用户脚本在沙箱中运行（“隔离   world“），onclick在目标页面范围内运行，无法查看   您的脚本创建的任何函数。

始终使用addEventListener（）Doc（或等效的库函数，   比如jQuery .on（））。

JSFiddle Link

Answer 3

这将针对它传递的元素，在这个例子中你传入＆＃34;这个＆＃34; as＆＃34;那＆＃34;然后我们执行.find＆＃34;＆＃34;找到一个p标签子元素，然后找到.text来返回子文本中的文本内容。

function add_basket(that) {
    $(".basket").append("<li>"+jQuery(that).find('p').text()+"</li>");
}

如何通过单击其div来获取p中的文本？

3 个答案: