需要電網和功能動態使用jQuery/JavaScript的

這裏是我的js部分代碼：需要電網和功能動態使用jQuery/JavaScript的

$(document).ready(function(){ 
    //For first textArea 
    $("#showTextArea1").click(function(){ 
    $('#area1').css('display','block'); 
    $('#addingText1').css('display', 'none'); 
    $('#add1').click(function(){ 
     var text = $('textarea#txtarea1').val(); 
     if(text!=''){ 
     $('p#p1').text(text); $('#area1').css('display','none'); 
     } 
     else{ 
     $('#error1').css('display','block'); 
     } 
    }); 
    $('#remove1').click(function(){ 
     $('#area1').css('display','none'); 
     $('#addingText1').css('display', 'block'); 
    }); 
    }); 

    //For 1st title 
    $("#showTitle1").click(function(){ 
    $('#area1').css('display','block'); 
    $('#addingText1').css('display', 'none'); 
    $('.add1').click(function(){ 
     var text = $('.forTitle1').val(); 
     if(text!=''){ 
     $('h2#h21').text(text); 
     $('#area1').css('display','none'); 
     } 
     else{ 

     $('#titleError1').css('display','block'); 
     } 
    }); 
    $('#remove1').click(function(){ 
     $('#area1').css('display','none'); 
     $('#addingText1').css('display', 'block'); 
    }); 
    });  
}); 

function refreshPage(){ 
    window.location.reload(); 
}

<!DOCTYPE html> 
    <html> 
    <head> 
     <title>Test</title> 
     <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> 
     <link rel="stylesheet" type="text/css" href="css/style.css">  
    </head> 
    <body> 
    <section class="container"> 
     <div class="row"> 
     <article class="col-md-4"> 
      <div class="border"> 
      <p id="p1"></p> 
      <h2 id="h21"></h2> 
      <div id="addingText1"> 
      <h4 class="title" id="showTextArea1">Add Description</h4> 
      <h4 class="subTitle" id="showTitle1">Add Title</h4> 
      </div> 
      <div id="area1" style="display: none;"> 
      <textarea id="txtarea1" class="forTitle1" placeholder="Add Description"></textarea> 
      <input type="button" class="add1" value="+" id="add1" /> 
      <input type="button" class="removeclass1" value="-" id="remove1" /> 
      <p id="error1" style="display: none;">Please enter text</p> 
      <p id="titleError1" style="display: none;">Please enter title</p> 
      </div> 

      </div> 
     </article> 
     <div class="col-md-12 col-xs-6 text-right"> 
      <button class="resetProperty" type="reset" onClick="refreshPage()">Clear All</button> 
     </div> 
     </div> 
    </section> 
    <script src="js/jquery-3.1.1.min.js"></script> 
    <script src="js/main.js"></script> 
    </body> 
    </html>

我想是的，我想如果我把9 jQuery中的9個div一定是自動創建，如果我編寫7，將創建7個網格，我也希望這些功能將動態工作。

來源

2016-12-02 Arun Jha

<!-- HTML Code --> 
<input type ="text" id="count"/> 
<input type="button" id="create" value="Create"/> 
<div id="divs"/> 

<!-- JS Code --> 
<script> 
$('#create').on('click',function(){ 
    $('#divs').html('') 
    console.log($('#count').val()); 
    for(i=0; i < parseInt($('#count').val()) ; i++){ 
     $('#divs').append('<div style="height:100px; width:100px ;margin:10px;background:red;"></div>'); 
    } 
}); 
</script>

來源

2016-12-02 06:42:58 madhairsilence

需要電網和功能動態使用jQuery/JavaScript的

回答

相關問題