如何循環按鈕

Question

我不確定循環是否正確，但我有一個完美工作的產品頁面。我希望能夠有一個「添加產品選項按鈕」，當管理員點擊它時，它會切換下來，而另一個「添加產品選項按鈕」會替換剛纔打開的那個按鈕。因此，產品選項的數量是無限的，用戶將能夠添加儘可能多的產品。

 <!--Restaurant toggle--> 
     <a id="restt" class ="header"href="#" onclick="toggleVisibility('Rest');"> 
      <h3 id="open">Your Restaurants</h3> 
     </a> 
     <div id="Rest" class="Rest_new" style="display: none;"><div> 
     <ul class="tabs1"> 
      <!--      
      <li id="order" class="rred"> 
       <a href="Franchise-account-orders.php">restaurant</a> 
      </li> 
      --> 
      <li id="order_open" class="rgreen"> 
       <a href="javascript:void(0);">New restaurant</a> 
      </li> 
     </ul> 
    </div> 
</div> 

<!-- add element--> 
<script> 
    $(document).on('click', 'li#order_open', function() { 
     $(this).before('<li><a href="Menu.php">New restaurant</a></li>'); 

     // add to localsorage? 
     window.onload = function() {} 
     var order_open = $('div#Rest').html(); 
     localStorage.setItem('div#Rest', order_open); 
    }); 
</script> 

我現在正在使用下面的代碼。它創建了無限的選項，但是我無法打開選項，我無法使其切換，並且在刷新頁面時消失。有一個更好的方法嗎。

Answer 1

你問的問題是JavaScript。你可以使用

$('container').append('html content'); 

看到一個例子：

$(document).ready(function(){ 
 
    $("#btn1").click(function(){ 
 
     $("p").append(" <b>Appended text</b>."); 
 
    }); 
 

 
    $("#btn2").click(function(){ 
 
     $("ol").append("<li>Appended item</li>"); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p>This is a paragraph.</p> 
 
<p>This is another paragraph.</p> 
 

 
<ol> 
 
    <li>List item 1</li> 
 
    <li>List item 2</li> 
 
    <li>List item 3</li> 
 
</ol> 
 

 
<button id="btn1">Append text</button> 
 
<button id="btn2">Append list items</button>

查看更多 http://www.w3schools.com/jquery/jquery_dom_add.asp

Answer 2

要創建更多的餐館，你可以使用jQuery的追加功能添加鏈接。然後使用localstorage來存儲和檢索創建的鏈接數量。

HTML

<h3 id="open">Your Restaurants</h3> 
<div class="Rest_new" id="rest"> 
<div> 
    <ul class="tabs1" id="optionContainer"> 
    </ul> 
</div> 

JavaScrtipt

var options = parseInt(localStorage.getItem('numberOfOptions')); 
if(isNaN(options)) { options = 0; } 


function addOption(n) { 
    $('#optionContainer').append('<li class="rgreen" id="order_open'+n+'"><a href="javascript:void(0);">New restaurant '+n+'</a></li>'); 
} 


$(document).ready(function(){ 

    for(var i = 0; i < options; i++) { 
     addOption(i); 
    } 

    $('#open').on('click',function() { 
    addOption(options); 
    options++; 
    localStorage.setItem('numberOfOptions',parseInt(options)); 
    }) 

}); 

你可以看到它在這裏工作：https://jsfiddle.net/igor_9000/pm4Lv44t/1/

希望幫助！