鍍金池/ 問答/Java  HTML/ JQUERY如何實(shí)現(xiàn)點(diǎn)擊插入，再點(diǎn)擊刪除呢？

JQUERY如何實(shí)現(xiàn)點(diǎn)擊插入，再點(diǎn)擊刪除呢？

<div class="box">
    <div class="text"></div>
    <ul>
        <li>我是內(nèi)容1</li>
        <li>...</li>
        <li>我是內(nèi)容N</li>
    </ul>
</div>

HTML結(jié)構(gòu)如上所示，想要實(shí)現(xiàn)的效果是，點(diǎn)擊其中一個(gè)LI會(huì)把當(dāng)前點(diǎn)擊的LI加上<p class="li-text">文字</p>的形式插進(jìn)<div class='text'></div>并給當(dāng)前點(diǎn)擊的li加上個(gè)class='cur'，最多只能點(diǎn)擊三次li，以及插入三個(gè)到text中。問題是，如何在當(dāng)前點(diǎn)擊li之后插入完成，再點(diǎn)擊刪除當(dāng)前插入的內(nèi)容呢？求解，非常感謝！~

回答
編輯回答
溫衫

  1. 首先，鑒于jQuery是命令式的庫，所以建議你把需求一條條列出來，這樣就知道每一步該干嘛了，以及做進(jìn)一步的優(yōu)化。那么這里就有：

    1. 點(diǎn)擊其中一個(gè)LI
    2. 把當(dāng)前點(diǎn)擊的LI加上個(gè)class='cur'
    3. <p class="li-text">文字</p>插進(jìn)<div class='text'></div>
    4. 最多只能點(diǎn)擊三次li，插入三個(gè)到text中
    5. 在當(dāng)前點(diǎn)擊li之后插入完成，再點(diǎn)擊刪除當(dāng)前插入的內(nèi)容

  2. 這里會(huì)發(fā)現(xiàn)題主的敘述很亂，這一般也是為什么寫不出來代碼的原因。這步來分析下上一步的整理出來的需求：

    1. 點(diǎn)擊li，肯定需要事件監(jiān)聽
    2. 在事件回調(diào)里使用$(this)可以抓到當(dāng)前事件發(fā)生的元素，加class就不用說了吧
    3. 不多說
    4. 是“每個(gè)li只能點(diǎn)擊3次”還是“所有的li總共點(diǎn)擊3次”？這個(gè)可以在ul或者每個(gè)li加個(gè)data屬性來存儲(chǔ)次數(shù)，然后每次事件回調(diào)的時(shí)候讀下次數(shù)判斷就行了
    5. 加入的p直接綁個(gè)回調(diào)$(this).remove()自刪除
2017年8月29日 15:41
編輯回答
心上人

試試用data()保存在當(dāng)前l(fā)i中，點(diǎn)擊的時(shí)候判斷是否有對(duì)應(yīng)的節(jié)點(diǎn)，有的話移除，否則添加

2018年8月24日 22:01
編輯回答
脾氣硬
<div class="box">
    <div id="showText" class="text"></div>
    <ul id="liParent">
        <li>我是內(nèi)容1</li>
        <li>...</li>
        <li>我是內(nèi)容N</li>
    </ul>
</div>
$('#liParent').on('click' , 'li' , function(e){ 
   var text = e.target.textContent;
   var p = $('<p class="li-text">'+ text +'</p>');
   p.on('click',function(){
     p.remove();
   });
  $('#showText').append(p);
});

https://codepen.io/randyou/pe...

2018年4月7日 20:24