I want this operations using jQuery. On image click The item should add to the menu. Suppose I click on pizza image the it should add new li in ul with name pizza. When I again click on image 1 that pizza should be gone. This is code:
JavaScript
x
28
28
1
<body>2
<div class="foodcourt">3
<div class="container">4
<header>5
6
</header>7
<section class="maincircle">8
9
<ul class="ch-grid">10
<li>11
<div class="ch-item">12
<div class="ch-info">13
<div class="ch-info-front ch-img-1"></div>14
<div class="ch-info-back">15
<h3>Pizza</h3>16
<p>Price: ₹100</p>17
</div>18
</div>19
</div>20
</li>21
</section>22
<div class="menucard">23
<ul id="list">24
</ul>25
</div>26
</div>27
</div>28
Advertisement
Answer
Working Fiddle
Your HTML:
JavaScript
1
26
26
1
<div class="foodcourt">2
<div class="container">3
<section class="maincircle">4
<ul class="ch-grid">5
<li>6
<div class="ch-item">7
<div class="ch-info">8
<div class="ch-info-front ch-img-1">9
<img src="http://www.belfast-takeaways.co.uk/img/pizza.jpg" />10
</div>11
<div class="ch-info-back">12
<h3>Pizza</h3>13
14
<p>Price: ₹100</p>15
</div>16
</div>17
</div>18
</li>19
</ul>20
</section>21
<div class="menucard">22
<ul id="list"></ul>23
</div>24
</div>25
</div>26
Some jQuery:
JavaScript
1
9
1
$(".ch-img-1").live("click", function () {2
var newLi = $('.ch-info .ch-info-back h3').text();3
if ($("#list li:contains(" + newLi + ")").length) {4
$($("#list li:contains(" + newLi + ")")).remove();5
} else {6
$('.menucard #list').append('<li>' + newLi + '</li>');7
}8
});9
Voila!