Javascript JQuery从第二个Div获取数据到Li_Javascript_Jquery_Html_Css_Javascript Events

Javascript JQuery从第二个Div获取数据到Li

javascript jquery html css

Javascript JQuery从第二个Div获取数据到Li,javascript,jquery,html,css,javascript-events,Javascript,Jquery,Html,Css,Javascript Events,我希望使用jQuery执行此操作。在图像上单击应添加到菜单中的项目。假设我点击pizza图像，它会在ul中添加新的li，并命名为pizza。当我再次点击图1时，比萨饼应该不见了。这是代码。提前谢谢你的帮助 <body> <div class="foodcourt"> <div class="container"> <header> </header> <section

我希望使用jQuery执行此操作。在图像上单击应添加到菜单中的项目。假设我点击pizza图像，它会在ul中添加新的li，并命名为pizza。当我再次点击图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>




披萨
价格：₹一百

我想这会对你有所帮助

把你需要的东西处理掉

$(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;
     }
 });

});

$（文档）.ready（函数（）
{
var add=true；
$（'.ch info back'）。单击（函数（）
{
var text=$（this.find（'h3'）.html（）；
如果（添加）
{
$（“#列表”）.append（“”+text+”）；
add=false；
}
其他的
{
$（'#list'）.empty（）；
加法=真；
}
});
});

正在工作您的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>

$(".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 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>

$(".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>');
    }
});

$（.ch-img-1”）.live（“单击”，函数（）{
var newLi=$（'.ch info.ch info back h3'）.text（）；
if（$（“#列表li:contains（“+newLi+”））。长度）{
$（$（“#列表li:contains（“+newLi+”））。删除（）；
}否则{
$（'.menucard#list'）。追加（''+newLi+''）；
}
});

瞧

我想在这张图片上点击menucard类的li添加了比萨饼。当我再次单击时，它应该从li中删除。图像首先在哪里？图像在div标记中。通道信息前端通道-img-1、通道信息前端通道-img-2、通道信息前端通道-img-3、通道信息前端通道-img-4。像那样。