我想使用 jQuery 进行此操作。 在图像上单击该元素应添加到菜单中。 假设我点击披萨图像，它应该在 ul 中添加新的 li，名称为披萨。当我再次点击图片 1 时，披萨应该不见了。这是代码:
<body>
<div class="foodcourt">
<div class="container">
<header>
</header>
<section class="maincircle">
<ul class="ch-grid">
<li>
<div class="ch-item">
<div class="ch-info">
<div class="ch-info-front ch-img-1"></div>
<div class="ch-info-back">
<h3>Pizza</h3>
<p>Price: ₹100</p>
</div>
</div>
</div>
</li>
</section>
<div class="menucard">
<ul id="list">
</ul>
</div>
</div>
</div>
最佳答案
工作 Fiddle
您的HTML:
<div class="foodcourt">
<div class="container">
<section class="maincircle">
<ul class="ch-grid">
<li>
<div class="ch-item">
<div class="ch-info">
<div class="ch-info-front ch-img-1">
<img src="http://www.belfast-takeaways.co.uk/img/pizza.jpg" />
</div>
<div class="ch-info-back">
<h3>Pizza</h3>
<p>Price: ₹100</p>
</div>
</div>
</div>
</li>
</ul>
</section>
<div class="menucard">
<ul id="list"></ul>
</div>
</div>
</div>
一些jQuery:
$(".ch-img-1").live("click", function () {
var newLi = $('.ch-info .ch-info-back h3').text();
if ($("#list li:contains(" + newLi + ")").length) {
$($("#list li:contains(" + newLi + ")")).remove();
} else {
$('.menucard #list').append('<li>' + newLi + '</li>');
}
});
瞧!
关于javascript - jQuery从另一个div获取数据到li，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24879730/