如何循环按钮

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/

希望帮助！