動態添加和刪除字段jquery

我正在動態添加和刪除字段。我使用jQuery隱藏顯示動態加載新的textarea或刪除（隱藏）動態添加和刪除字段jquery

我知道append方法以及for循環，但因爲我在wordpress中這樣做textrea = wp_editor所以我不能使用append方法，因此需要添加靜態html，然後使用hide show。

我能夠實現動態添加字段以及動態刪除字段。

我面臨的唯一問題是在刪除時，我希望再次出現添加字段。簡而言之，例如：我有1個組的5個字段的限制，就像在小提琴中一樣，我已經顯示了3個不同的組，每個組的限制爲5個。當我點擊「添加更多」時，每個組的SO都有5個可見的字段該組但是如果我刪除了該字段中的任何一個，那麼總數仍然是4，並且沒有添加更多內容。所以，如果一個字段被刪除，是否有可能再次添加ADD，除非組中有五個字段，否則應該在那裏。

這裏是JS Fiddle 下面是示例代碼

<div class="col_box"> 
     <div class="col_3"> 
      <div id="rwd11" class="txtara_cls"> 
       <div class="col_txt_lft"> 
        <textarea class="result11">aaaa</textarea> 
       </div> 
       <div class="clear"></div> 
      </div> 
      <div id="rwd12" class="txtara_cls" style="display:none;"> 
       <div class="col_txt_lft"> 
        <textarea class="result12">bbbb</textarea> 
       </div> 
       <div class="col_del_rght"> 
        <a href="#" onclick="document.getElementById('rwd12').style.display='none';return false;" class="deleterwd" style="" title="Delete this reward"><span class="icon-trash icon"></span>Delete</a> 
       </div> 
       <div class="clear"></div> 
      </div> 
      <div id="rwd13" class="txtara_cls" style="display:none;"> 
       <div class="col_txt_lft"> 
        <textarea class="result13">cccc</textarea> 
       </div> 
       <div class="col_del_rght"> 
        <a href="#" onclick="document.getElementById('rwd13').style.display='none';return false;" class="deleterwd" style="" title="Delete this reward"><span class="icon-trash icon"></span>Delete</a> 
       </div> 
       <div class="clear"></div> 
      </div> 
      <div id="rwd14" class="txtara_cls" style="display:none;"> 
       <div class="col_txt_lft"> 
        <textarea class="result14">ddddd</textarea> 
       </div> 
       <div class="col_del_rght"> 
        <a href="#" onclick="document.getElementById('rwd14').style.display='none';return false;" class="deleterwd" style="" title="Delete this reward"><span class="icon-trash icon"></span>Delete</a> 
       </div> 
       <div class="clear"></div> 
      </div> 
      <div id="rwd15" class="txtara_cls" style="display:none;"> 
       <div class="col_txt_lft"> 
        <textarea class="result15">eeeee</textarea> 
       </div> 
       <div class="col_del_rght"> 
        <a href="#" onclick="document.getElementById('rwd15').style.display='none';return false;" class="deleterwd" style="" title="Delete this reward"><span class="icon-trash icon"></span>Delete</a> 
       </div> 
       <div class="clear"></div> 
      </div> 
      <div id="hide_11" class="add_extra">   
       <a id="hide_1_1" href="JavaScript:void(0);" class="addrwd" style="" title="Add reward"><span class="icon-trash icon"></span>Add More Results</a> 
      </div>  
      <div id="hide_12" class="add_extra" style="display:none;"> 
       <a id="hide_1_2" href="JavaScript:void(0);" class="addrwd" style="" title="Add reward"><span class="icon-trash icon"></span>Add More Results</a> 
      </div>  
      <div id="hide_13" class="add_extra" style="display:none;"> 
       <a id="hide_1_3" href="JavaScript:void(0);" class="addrwd" style="" title="Add reward"><span class="icon-trash icon"></span>Add More Results</a> 
      </div>  
      <div id="hide_14" class="add_extra" style="display:none;"> 
       <a id="hide_1_4" href="JavaScript:void(0);" class="addrwd" style="" title="Add reward"><span class="icon-trash icon"></span>Add More Results</a> 
      </div>  
     </div> 
    </div> 
    <div class="col_box"> 
     <div class="col_3"> 
      <div id="rwd21" class="txtara_cls"> 
       <div class="col_txt_lft"> 
        <textarea class="result21">ffff</textarea> 
       </div> 
       <div class="clear"></div> 
      </div> 
      <div id="rwd22" class="txtara_cls" style="display:none;"> 
       <div class="col_txt_lft"> 
        <textarea class="result22">ggggg</textarea> 
       </div> 
       <div class="col_del_rght"> 
        <a href="#" onclick="document.getElementById('rwd22').style.display='none';return false;" class="deleterwd" style="" title="Delete this reward"><span class="icon-trash icon"></span>Delete</a> 
       </div> 
       <div class="clear"></div> 
      </div> 
      <div id="rwd23" class="txtara_cls" style="display:none;"> 
       <div class="col_txt_lft"> 
        <textarea class="result23">hhhhh</textarea> 
       </div> 
       <div class="col_del_rght"> 
        <a href="#" onclick="document.getElementById('rwd23').style.display='none';return false;" class="deleterwd" style="" title="Delete this reward"><span class="icon-trash icon"></span>Delete</a> 
       </div> 
       <div class="clear"></div> 
      </div> 
      <div id="rwd24" class="txtara_cls" style="display:none;"> 
       <div class="col_txt_lft"> 
        <textarea class="result24">iiiii</textarea> 
       </div> 
       <div class="col_del_rght"> 
        <a href="#" onclick="document.getElementById('rwd24').style.display='none';return false;" class="deleterwd" style="" title="Delete this reward"><span class="icon-trash icon"></span>Delete</a> 
       </div> 
       <div class="clear"></div> 
      </div> 
      <div id="rwd25" class="txtara_cls" style="display:none;"> 
       <div class="col_txt_lft"> 
        <textarea class="result25">jjjjj</textarea> 
       </div> 
       <div class="col_del_rght"> 
        <a href="#" onclick="document.getElementById('rwd25').style.display='none';return false;" class="deleterwd" style="" title="Delete this reward"><span class="icon-trash icon"></span>Delete</a> 
       </div> 
       <div class="clear"></div> 
      </div> 
      <div id="hide_21" class="add_extra">   
       <a id="hide_2_1" href="JavaScript:void(0);" class="addrwd" style="" title="Add reward"><span class="icon-trash icon"></span>Add More Results</a> 
      </div>  
      <div id="hide_22" class="add_extra" style="display:none;"> 
       <a id="hide_2_2" href="JavaScript:void(0);" class="addrwd" style="" title="Add reward"><span class="icon-trash icon"></span>Add More Results</a> 
      </div>  
      <div id="hide_23" class="add_extra" style="display:none;"> 
       <a id="hide_2_3" href="JavaScript:void(0);" class="addrwd" style="" title="Add reward"><span class="icon-trash icon"></span>Add More Results</a> 
      </div>  
      <div id="hide_24" class="add_extra" style="display:none;"> 
       <a id="hide_2_4" href="JavaScript:void(0);" class="addrwd" style="" title="Add reward"><span class="icon-trash icon"></span>Add More Results</a> 
      </div>  
     </div> 
    </div>

這裏是JS部分

 jQuery(document).ready(function() { 
     jQuery('#hide_1_1').click(function() { 
      jQuery('#rwd12').css('display', 'block'); 
      jQuery('#hide_11').css('display', 'none'); 
      jQuery('#hide_12').css('display', 'block'); 
     }); 
     jQuery('#hide_1_2').click(function() { 
      jQuery('#rwd13').css('display', 'block'); 
      jQuery('#hide_12').css('display', 'none'); 
      jQuery('#hide_13').css('display', 'block'); 
     }); 
     jQuery('#hide_1_3').click(function() { 
      jQuery('#rwd14').css('display', 'block'); 
      jQuery('#hide_13').css('display', 'none'); 
      jQuery('#hide_14').css('display', 'block'); 
     }); 
     jQuery('#hide_1_4').click(function() { 
      jQuery('#rwd15').css('display', 'block'); 
      jQuery('#hide_14').css('display', 'none'); 
     }); 
     jQuery('#hide_2_1').click(function() { 
      jQuery('#rwd22').css('display', 'block'); 
      jQuery('#hide_21').css('display', 'none'); 
      jQuery('#hide_22').css('display', 'block'); 
     }); 
     jQuery('#hide_2_2').click(function() { 
      jQuery('#rwd23').css('display', 'block'); 
      jQuery('#hide_22').css('display', 'none'); 
      jQuery('#hide_23').css('display', 'block'); 
     }); 
     jQuery('#hide_2_3').click(function() { 
      jQuery('#rwd24').css('display', 'block'); 
      jQuery('#hide_23').css('display', 'none'); 
      jQuery('#hide_24').css('display', 'block'); 
     }); 
     jQuery('#hide_2_4').click(function() { 
      jQuery('#rwd25').css('display', 'block'); 
      jQuery('#hide_24').css('display', 'none'); 
     }); 

    });

來源

2015-06-17 user930026

您可以通過在您的HTML中使用類重用您的函數，並通過克隆和追加元素而不是隱藏和顯示預先存在的元素來大量減少HTML和JS的數量。 –

我面臨的問題是我需要在wordpress中顯示所見即所得的編輯器，如果我嘗試實例化它，它不會看起來相同所以，而不是使用該方法我試圖使用簡單的PHP代碼（只需要一個循環）生成這個html 我嘗試了很多，使其工作，但慘敗失敗 – user930026

<form role="form" action="" method="POST"> 
     <label>Stuff</label> 
     <div class="multi-field-wrapper"> 
      <div class="multi-fields"> 
      <div class="multi-field"> 
      <input type="text" name="stuff[]"> 
      <button type="button" class="remove-field">Remove</button> 
     </div> 
    </div> 
<button type="button" class="add-field">Add field</button> 
    </div> 
    </form> 

<script> 
$('.multi-field-wrapper').each(function() { 
    var $wrapper = $('.multi-fields', this); 
    $(".add-field", $(this)).click(function(e) { 
    $('.multi-field:first-child', $wrapper).clone(true).appendTo($wrapper).find('input').val('').focus(); 
}); 
$('.multi-field .remove-field', $wrapper).click(function() { 
    if ($('.multi-field', $wrapper).length > 1) 
     $(this).parent('.multi-field').remove(); 
    }); 
}); 
</script>

這是演示用於動態地添加和remove.It有助於ö解決這個問題。

來源

2015-06-17 12:31:17

我正在管理端，它允許我可以使用某些HTML集。你可以請嘗試一次與上面的HTML – user930026

動態添加和刪除字段jquery

回答

相關問題