如果前一个文本区域为空，如何停止显示textarea？

Question

我有Collection {#805 #items: array:2 [ 0 => Driver {#798 #dates: array:1 [ 0 => "deleted_time" ] #table: "UserDriver" +timestamps: false +appends: array:1 [ 0 => "bank" ] #connection: "mysql" #primaryKey: "id" #keyType: "int" +incrementing: true #with: [] #withCount: [] #perPage: 15 +exists: true +wasRecentlyCreated: false #attributes: array:2 [ "userdriver_name" => "driver1" "userdriver_phone_number" => "140412351235" ] #original: array:4 [ "userdriver_name" => "driver1" "userdriver_phone_number" => "140412351235" "pivot_client_id" => 1 "pivot_userdriver_id" => 1 ] #changes: [] #casts: [] #dateFormat: null #dispatchesEvents: [] #observables: [] #relations: array:1 [ "pivot" => Pivot {#801 +pivotParent: Client {#713 #table: "Client" #guarded: array:2 [ 0 => "id" 1 => "created_time" ] #connection: "mysql" #primaryKey: "id" #keyType: "int" +incrementing: true #with: [] #withCount: [] #perPage: 15 +exists: true +wasRecentlyCreated: false #attributes: array:20 [ "id" => 1 "created_time" => "2017-12-28 05:23:50" "invoice_email" => "" "biz_number" => "1234512345" ] #original: array:20 [ "id" => 1 "created_time" => "2017-12-28 05:23:50" "invoice_email" => "" "biz_number" => "1234512345" ] #changes: [] #casts: [] #dates: [] #dateFormat: null #appends: [] #dispatchesEvents: [] #observables: [] #relations: [] #touches: [] +timestamps: true #hidden: [] #visible: [] #fillable: [] #forceDeleting: false } #foreignKey: "client_id" #relatedKey: "userdriver_id" #guarded: [] #connection: "mysql" #table: "ClientDriver" #primaryKey: "id" #keyType: "int" +incrementing: true #with: [] #withCount: [] #perPage: 15 +exists: true +wasRecentlyCreated: false #attributes: array:2 [ "client_id" => 1 "userdriver_id" => 1 ] #original: array:2 [ "client_id" => 1 "userdriver_id" => 1 ] #changes: [] #casts: [] #dates: [] #dateFormat: null #appends: [] #dispatchesEvents: [] #observables: [] #relations: [] #touches: [] +timestamps: false #hidden: [] #visible: [] #fillable: [] } ] #touches: [] #hidden: [] #visible: [] #fillable: [] #guarded: array:1 [ 0 => "*" ] #rememberTokenName: "remember_token" } 1 => Driver {#799 #dates: array:1 [ 0 => "deleted_time" ] #table: "UserDriver" +timestamps: false +appends: array:1 [ 0 => "bank" ] #connection: "mysql" #primaryKey: "id" #keyType: "int" +incrementing: true #with: [] #withCount: [] #perPage: 15 +exists: true +wasRecentlyCreated: false #attributes: array:2 [ "userdriver_name" => "driver2" "userdriver_phone_number" => "140412351236" ] #original: array:4 [ "userdriver_name" => "driver2" "userdriver_phone_number" => "140412351236" "pivot_client_id" => 1 "pivot_userdriver_id" => 2 ] #changes: [] #casts: [] #dateFormat: null #dispatchesEvents: [] #observables: [] #relations: array:1 [ "pivot" => Pivot {#803 +pivotParent: Client {#713} #foreignKey: "client_id" #relatedKey: "userdriver_id" #guarded: [] #connection: "mysql" #table: "ClientDriver" #primaryKey: "id" #keyType: "int" +incrementing: true #with: [] #withCount: [] #perPage: 15 +exists: true +wasRecentlyCreated: false #attributes: array:2 [ "client_id" => 1 "userdriver_id" => 2 ] #original: array:2 [ "client_id" => 1 "userdriver_id" => 2 ] #changes: [] #casts: [] #dates: [] #dateFormat: null #appends: [] #dispatchesEvents: [] #observables: [] #relations: [] #touches: [] +timestamps: false #hidden: [] #visible: [] #fillable: [] } ] #touches: [] #hidden: [] #visible: [] #fillable: [] #guarded: array:1 [ 0 => "*" ] #rememberTokenName: "remember_token" } ] } 显示div的onclick。

我希望它：

• 显示第一个textarea
• 检查第一个textarea是否为空
• 如果为空，则不显示第二个textarea
• 如果不为空则显示第二个textarea

Html codde：

textarea

我的jQuery代码：

    <div class= "flex-container">    
        <div id= "cardarea" class ="parent2">
            <span><b id ="cardtitle">Stuff To Try (this is a list)</b>
   </span>
            <span>
          <i class ="fa fa-ellipsis-h" title ="List Actions" tabindex="0" 
     data-trigger ="focus" data-toggle="popover" ></i>
            </span>
            <div id="popover-content" style="display:none;">
                    <ul style ="margin:0; padding:0; list-style: none;" 
      class ="pop-over-list" >
                        <li >
                            <a id = "newcard" href="#" onclick="addcard()" >
                            <b style ="color: #444444">Add Card...</b>
                            </a>

                       </li>
         </ul>
         </div>
         </div>

Answer 1

你的代码非常混乱。您正在使用jQuery但不是以jQuery方式。看起来你正在混合使用vanilla JavaScript和jQuery。此外，您正在使用jQuery附加大量CSS，如果您想要设置样式，请使用CSS设置样式。就问题而言，只有当前一个元素中包含少量字符时，才想附加一个新的textarea元素。

所以我从头开始编写了一些代码，因为你的代码非常混乱。在此处，在我添加新的textarea之前，我使用textarea选择最后一个wrapper.find('textarea').last().val().length，如果返回的值超过0，则会追加新的textarea否则它会忽略。

＆＃13;

＆＃13;

var wrapper = $('#show-textarea');
$('#add-textarea').on('click', function() {
  if(wrapper.find('textarea').last().val().length) {
    wrapper.append('<textarea></textarea>');
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="show-textarea">
  <textarea></textarea>
</div>
<input type="button" id="add-textarea" value="Add Textarea">

＆＃13;

＆＃13;

＆＃13;

  

注意：这里没有使用.trim()，但我建议使用它。如果   您不能通过添加空格来创建新的textarea   以前的textarea元素，它将很乐意返回   length的{​​{1}}。

Answer 2

从正在调用“addcard”的位置传递“counter”。保持它在全球范围内的价值。

= form_for(@user, url: account_user_path(@account,@user), html: {class: 'form-horizontal', method: :patch}) do |f|

Answer 3

// Global variable so you can check length of previous textarea
var counter =0;
function addcard() {  
if(counter>0){
// Checkfor previous textarea
var oldValue=$('#TextBoxDiv'+counter).val();
//Check for null or empty
if(!oldValue){
return;
}
}
var newTextBoxDiv = $(document.createElement('textarea')) .attr("id", 'TextBoxDiv' + counter); var button = $(document.createElement('button')); newTextBoxDiv.css( "margin-top","6px"); newTextBoxDiv.css("width","210px"); newTextBoxDiv.css( "margin-left","8px"); newTextBoxDiv.css( "margin-bottom","6px"); newTextBoxDiv.css( "border-radius","5px"); newTextBoxDiv.appendTo("#cardarea").insertAfter('#cardtitle'); button.appendTo("#cardarea").insertAfter(newTextBoxDiv); button.css("margin-left","8px"); button.css("height","30px"); button.css("width","55px"); button.css( "margin-bottom","6px"); button.addClass("btn btn-s`enter code here`uccess"); button.text("Add"); button.css("font-weight","bold"); //button.appendTo("#cardarea").insertAfter(" <span class='glyphicon glyphicon-remove '</span>"); 
counter++;
 } 

这里当addcard函数调用时，它的第一次检查函数是第一次调用，然后不需要检查以前的textarea并添加新的textarea否则它将检查以前的textarea是空的还是null如果它然后退出函数否则添加新的