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

我有一个显示textarea点击div。

我希望它：

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

Html codde：

    <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>

我的jQuery代码：

   function addcard() {
  var counter = 0;
  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-success");
  button.text("Add");
  button.css("font-weight", "bold");
  //button.appendTo("#cardarea").insertAfter(" <span class='glyphicon 
  glyphicon - remove '</span>");
  if ($(newTextBoxDiv).val().length != 0) {
    alert("hello1");
  } else if ($(newTextBoxDiv).val().length === 0) {
    $('#newcard').hide();
  }
}

你的代码很混乱。您正在使用jQuery，但不是以jQuery的方式。看起来你正在混合vanilla JavaScript和jQuery。此外，你正在使用jQuery附加很多CSS，如果你想设置它的样式，请使用CSS设置它。就问题而言，仅当前一个元素中的字符很少时，您才希望附加一个新的textarea元素。

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

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

<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">

注意：我在这里不使用.trim()，但我建议使用它。如果您不需要，用户可以通过在中添加空格来创建新textarea 上一个textarea元素，它将愉快地返回 1 length .

从调用"addcard"的位置传递"计数器"。在全球范围内保持其价值。

function addcard(counter) {
    var oldTextBoxDiv = $("#TextBoxDiv" + counter);
    if (oldTextBoxDiv.val().length != 0) {
        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-success");
        button.text("Add");
        button.css("font-weight", "bold");
        button.appendTo("#cardarea").insertAfter(" <span class='glyphicon glyphicon - remove '</span>");
       // Increase the value of counter
       counter++;
    }
    else
    {
        alert("Please enter the data into the previous text area");
    }
}

// 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功能被调用时，它的第一个检查函数是第一次调用，然后无需检查以前的文本区域并添加新的文本区域，否则它将检查以前的文本区域是否为空或null，如果它随后退出函数，否则添加neww

相关内容

最新更新

热门标签：