第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題，去搜搜看，總會(huì)有你想問(wèn)的

添加刪除并動(dòng)態(tài)指示編號(hào)

添加刪除并動(dòng)態(tài)指示編號(hào)

千萬(wàn)里不及你 2022-06-09 17:25:34
所以目前我可以輕松添加和刪除多個(gè)textarea但我想做的是給每個(gè)特定的編號(hào)textarea這是我的文本區(qū)域你注意到我的默認(rèn)文本區(qū)域是Step 1但我想做的是，當(dāng)我點(diǎn)擊添加時(shí)，它會(huì)顯示另一個(gè)文本區(qū)域，上面寫(xiě)著Step 2  <div class="optionBox">                <div class="block">                    <div class="form-group">                      <label for="exampleFormControlTextarea1">Step 1</label>                      <textarea class="form-control rounded-0" id="exampleFormControlTextarea1" rows="10"></textarea>                    </div>                     <span class="remove">Remove</span>                </div>                <div class="block"> <span class="add">Add Option</span>                </div>            </div>我的 Javascript $('.add').click(function () {$('.block:last').before(' <div class="block"><div class="form-group"><label for="exampleFormControlTextarea1">Step</label><textarea class="form-control rounded-0" id="exampleFormControlTextarea1" rows="10"></textarea></div><span class="remove">Remove</span></div>');});這是當(dāng)前的輸出
查看完整描述

2 回答

?
慕村9548890

TA貢獻(xiàn)1884條經(jīng)驗(yàn) 獲得超4個(gè)贊

要完成這項(xiàng)工作，您可以在 each中添加一個(gè)span沒(méi)有內(nèi)容的元素。然后，您可以創(chuàng)建一個(gè)函數(shù)，每次添加或刪除.label.blockspan.block


我還強(qiáng)烈建議您克隆元素而不是在 JS 邏輯中添加大量 HTML，因?yàn)檫@違反了關(guān)注點(diǎn)分離原則，因?yàn)閷?JS 與 HTML 聯(lián)系得太緊密。在您的情況下，這可以通過(guò)簡(jiǎn)單地添加一個(gè)額外的類(lèi)來(lái)完成，該類(lèi).block包含textarea元素。嘗試這個(gè)：


$('.add').click(function() {

  let $lastBlock = $('.block.step:last');

  let $clone = $lastBlock.clone().insertAfter($lastBlock);

  $clone.find('textarea').val('');

  updateStepCounts();

});


$('.optionBox').on('click', '.remove', function() {

  if ($('.block.step').length > 1) {

    $(this).closest('.block').remove();

    updateStepCounts();

  }

});


let updateStepCounts = () => $('.block label span').text(i => i + 1);

updateStepCounts();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="optionBox">

  <div class="block step">

    <div class="form-group">

      <label for="exampleFormControlTextarea1">Step <span></span></label>

      <textarea class="form-control rounded-0" id="exampleFormControlTextarea1" rows="10"></textarea>

    </div>

    <span class="remove">Remove</span>

  </div>

  <div class="block">

    <span class="add">Add Option</span>

  </div>

</div>


查看完整回答
反對(duì) 回復(fù) 2022-06-09
?
一只萌萌小番薯

TA貢獻(xiàn)1795條經(jīng)驗(yàn) 獲得超7個(gè)贊

我刪除了div.block周?chē)摹疤砑舆x項(xiàng)”span并.append在新添加的div.block-container元素上使用，而不是在選項(xiàng)容器底部.before添加下一個(gè)。textarea我認(rèn)為這在語(yǔ)義上讀起來(lái)更好一些。


同樣使用字符串插值，我可以插入 + 1 的總數(shù)div.block來(lái)跟蹤頁(yè)面上可見(jiàn)的文本區(qū)域的數(shù)量。


希望這可以幫助。


$('.add').click(function () {

  const numberOfBlocks = $(".block").length;

  

  $(".block-container")

    .append(`

      <div class="block">

        <div class="form-group">

          <label for="exampleFormControlTextarea1">Step ${numberOfBlocks + 1}</label>

          <textarea class="form-control rounded-0" id="exampleFormControlTextarea1" rows="10"></textarea>      

        </div>

        <span class="remove">Remove</span>

      </div>`

    );

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="optionBox">

    <div class="block-container">

        

    </div>

    <span class="add">Add Option</span>

</div>


查看完整回答
反對(duì) 回復(fù) 2022-06-09
  • 2 回答
  • 0 關(guān)注
  • 115 瀏覽
慕課專(zhuān)欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢(xún)優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)