如何循环播放按钮

How to loop a button

本文关键字：播放 按钮 循环 何循环      更新时间：2023-09-26

我不确定循环是否是正确的术语，但我有一个运行良好的产品页面。我希望能够有一个"添加产品选项按钮"，当管理员单击它时，它会向下切换，另一个"添加产品选项按钮"替换我刚刚打开的按钮。因此，产品选项的数量是无限的，用户将能够添加任意数量的产品。

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

我目前正在使用以下代码。它创建了无限的选项，但是，我无法打开选项，无法切换，并且在页面刷新时消失。有没有更好的方法可以做到这一点。

你的问题是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

要创建其他餐厅，您可以使用jQuery的append函数来添加链接。 然后使用本地存储来存储和检索创建的链接数。

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

希望对您有所帮助！

相关文章：