![](/img/trans.png)
[英]How to make a TextAarea inside a Repeater shows on the click of a Button using JavaScript?
[英]Jquery Repeater, how to make the 'create button' at the bottom?
我了解到data-repeater-create=""
必須位於id="left_repeater"
,否則它將無法用作創建按鈕。 有沒有辦法使按鈕在id="left_repeater"
或id="right_repeater"
id="left_repeater"
之外id="left_repeater"
?
我的目標是當我點擊add left
按鈕,它只會創造了左輸入端,反之亦然add right
按鈕。 這兩個按鈕都在最底部。
$('#left_repeater').repeater({ show: function() { $(this).slideDown(); }, }); $('#right_repeater').repeater({ show: function() { $(this).slideDown(); }, });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.repeater/1.2.1/jquery.repeater.min.js"></script> <div id="left_repeater"> <div data-repeater-list="left_items"> <div data-repeater-item> <div class="row"> <div class="col-6"> <input type="text" name="name" class="form-control form-control-sm m-input" placeholder="left"> </div> <div class="col-6"> </div> </div> </div> </div> <!-- <div data-repeater-create="" class="btn btn-sm btn-success"> <span><i class="la la-plus"></i><span>Add</span></span> </div> --> </div> <div id="right_repeater"> <div data-repeater-list="right_items"> <div data-repeater-item> <div class="row"> <div class="col-6"> </div> <div class="col-6"> <input type="text" name="name" class="form-control form-control-sm m-input" placeholder="right"> </div> </div> </div> </div> <div data-repeater-create="" class="btn btn-sm btn-success"> <span><i class="la la-plus"></i><span>Add</span></span> </div> </div> <div class="row"> <div class="col-6 text-center"> <div data-repeater-create="" class="btn btn-sm btn-success"> <span><i class="la la-plus"></i><span>Add Left</span></span> </div> </div> <div class="col-6 text-center"> <div data-repeater-create="" class="btn btn-sm btn-success"> <span><i class="la la-plus"></i><span>Add Right</span></span> </div> </div> </div>
將#left_repeater放入div容器中。
<div class="container">
<div id="left_repeater">
.....
</div>
</div>
為此添加CSS樣式
.container {
display: flex;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.