javascript - 如何使用jquery只追加一次数据

标签 javascript jquery html

下面是我的用于点击选项卡功能的代码。

<body>
    <div class="row-fluid">
        <div class="span1 offset1">
            <div class="tabbable" align="center">
                <ul class="nav nav-tabs nav-stacked">
                    <li class="active"><a href="#tabs-1" data-toggle="tab">Eat</a>
                    </li>
                    <li><a href="#tabs-2">Drink</a>
                    </li>
                </ul>
            </div>
        </div>
        <div id="1"></div>
    </div>
    <script type="text/javascript">
        $("a[href=#tabs-1]").click(function() {

            for (i = 0; i < mytabs.length; i++) {
                $('div').append("<br>" + mytabs[i] + "<br>");
            }
        });
    </script>
</body>

这里我使用 javascript 将选项卡的值存储在数组中

<script>
    $(function() {
        $("#tabbable").tabs();
    });

    var i;
    var mytabs = new Array();
    mytabs[0] = "Saab";
    mytabs[1] = "Volvo";
    mytabs[2] = "BMW";
</script>

现在我希望在单击选项卡后显示存储在数据中的值。但是我的代码在做什么,它显示数据的次数与数据存储在数组中的次数一样多。意味着我想要输出为 Saab、Volvo、BMW,但显示了三次。任何人都可以帮助我在这方面使用什么而不是追加,以便我获得所需的输出。

最佳答案

尝试使用jQuery.one http://jsfiddle.net/adiioo7/UFBzn/1/

JavaScript:-

 var i;
 var mytabs = new Array();
 mytabs[0] = "Saab";
 mytabs[1] = "Volvo";
 mytabs[2] = "BMW";

 $(function () {
     $(".tabbable").tabs();

     $("a[href^=#tabs-]").one("click", function () {
         for (i = 0; i < mytabs.length; i++) {
             $($(this).attr("href")).append("<br>" + mytabs[i] + "<br>");
         }
     });
 });

HTML:-

<div class="row-fluid">
    <div class="span1 offset1">
        <div class="tabbable" align="center">
            <ul class="nav nav-tabs nav-stacked">
                <li class="active"><a href="#tabs-1" data-toggle="tab">Eat</a>

                </li>
                <li><a href="#tabs-2">Drink</a>

                </li>
            </ul>
            <div id="tabs-1"></div>
            <div id="tabs-2"></div>
        </div>
    </div>
</div>

关于javascript - 如何使用jquery只追加一次数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18377188/

相关文章:

javascript - 使用 jQuery animate with stop 固定标题滚动

javascript - 如何在ajax成功中中断执行并显示错误?

javascript - Angular 将数据传递给子组件

javascript - JS : How to handle a 400 Bad Request error returned from API url

jquery - 查找具有指定类的每个 div

javascript - 如何在 JavaScript 运行时、回发之前在单击时立即为光标设置动画

html - 使用 class 或 id 都不会影响此 div 的功能

javascript - 将二进制数据从 Java ServerSocket 流式传输到 javascript html

javascript - Div Not Center 在 Bootstrap 中使用类 ="center-block"

javascript - 仅保留数组中每个对象中的选定键