工作Fiddle

Question

我希望使用jQuery进行此操作。在图像上单击该项应添加到菜单中。假设我点击披萨图片，它应该在ul中添加名为pizza的新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>

Answer 1

我认为这会对你有帮助..

http://jsfiddle.net/Praveen16oct90/YwRTU/

做你需要的事情......

$(document).ready(function()
  {
 var add=true;
  $('.ch-info-back').click(function()
 {

   var text=$(this).find('h3').html();
    if(add)
    {
         $('#list').append('<li>'+text+'</li>');
        add=false;
    }
     else
     {
          $('#list').empty();
          add=true;
     }
 });

});

Answer 2

工作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>');
    }
});

瞧！

JQuery从另一个Div获取数据到Li

2 个答案:

工作Fiddle