如何在运行时创建多个切换？答案

【问题标题】：How to create many toggle in runtime?如何在运行时创建多个切换？
【发布时间】：2015-09-10 07:09:28
【问题描述】：

我创建了一个使用 ajax 显示带有 cmets 的帖子的页面要查看 cmets 用户必须点击帖子对应的评论按钮为了简单理解，举例：

在 HTML 中阻止

<button id="btn1">cmt1</button>
<button id="btn2">cmt2</button>

<div id="cmt1">comments</div>
<div id="cmt2">comments</div>

我尝试使用 for 循环作为

for(var i=0;i<count;i++){
    $("#cmt"+i).hide();
    $("#cmtbtn"+i).click(function(){
       $("#cmt"+i).toggle('slow');
    });
}

但它仅适用于最后一个 cmtbtn，每当我点击所有其他按钮时，最后一个评论框只会显示

我是说有一种 for 循环或任何循环的方式

更新：我的 Js 文件在这里 http://jsfiddle.net/9ss50nzc

【问题讨论】：

请贴出你到目前为止所做的代码
抱歉忘记显示代码
你能做jsFiddel吗？
jsfiddle.net/9ss50nzc@Amy

标签： javascript jquery

【解决方案1】：

尝试为所有 “评论按钮” 以及 “评论区” 提供相同且唯一的类。像下面的例子：

<button id="btn1" class="comtbtn"> cmt1 </button>
<button id="btn2" class="comtbtn"> cmt2 </button>
<div id="cmt1" class="comt-div">comments1</div>
<div id="cmt2" class="comt-div">comments2</div>

然后在类 "comtbtn" 上捕获点击事件。 Bellow 是隐藏评论显示的 js 脚本 -

$('.comtbtn').click(function() { var btnId = $(this).attr("id"); var id = btnId.slice(-1); $("#cmt"+id).toggle("slow"); });

添加 css 以在最初加载到 DOM 时隐藏所有评论部分。

.comt-div{ 显示：无； }

【讨论】：

【解决方案2】：

这是你想要的吗？一种获取按钮索引的方法，该索引等于文档上隐藏注释的索引位置？

您只需隐藏之前的评论并显示新评论。

var oldNode = '';
function showComment = function(index) {

    if (typeof oldNode != undefined) $(oldNode).hide('slow');
    $('.comment:eq('+$(index).index()+')').show();
    oldNode = $('comment:eq('+$(index).index()+')');
}



<button onclick="showComment(this)">cmnt 1</button>
<button onclick="showComment(this)" >cmnt 2</button>

<div class='comment' style='display: none'>comment a</div>
<div class='comment' style='display: none'>comment b</div>

【讨论】：

【解决方案3】：

从给你的按钮和 div 类开始

<button id="btn1" class="actionButtons">cmt1</button>
<button id="btn2" class="actionButtons">cmt2</button>
<div id="cmt1" class="actionDivs" style="display:none">comments1<br/>more comments<br/>and even more</div>
<div id="cmt2" class="actionDivs" style="display:none">comments2<br/>another comment<br/>and another one</div>

然后循环遍历具有该类名的元素

for(var  i = 0; i < $(".actionButtons").length; i++){
    $(".actionButtons")[i].onclick = function () {
        for(var j = 0; j < $(".actionDivs").length; j++){
            if ($(".actionDivs")[j].id == this.innerText)
                $("#" + this.innerText).show();
            else
                $("#" + $(".actionDivs")[j].id).hide();
        }
    };
}

Fiddle

我希望这能让您更接近您的解决方案。

【讨论】：

你的答案更多是静态内容。
我知道如何实现它，但是当运行时通过 ajax 添加更多 cmets 和更多评论按钮时，如何分配 jquery
抱歉我错过了 Ajax 部分
我是说有一种 for 循环或任何循环的方式
我猜你必须重构你的整个问题，伙计

【解决方案4】：

我得到了答案，可以通过使用遍历来切换内部循环。谢谢大家终于整理出答案了。

【讨论】：