切换到 for 循环

Question

我想问一下 for 循环中的多个切换。 例如，当我点击一个 div 时，会出现一个切换菜单。

这是我的代码：

 for (var i = 0; i < myObjectString.length; i++) {
var obj = JSON.parse(myObjectString);
document.getElementById("endorsment").innerHTML += "<div id='endor'>\n\
        <div class='endo_"+ obj.Endorsment[i].lang + "' id='endo'>\n\
        <div id='count'>"+ obj.Endorsment[i].ln + "</div>\n\
        <div id='proglang'>"+ obj.Endorsment[i].lang +"</div>\n\
        </div>\n\
        <div class='contenthover_"+ obj.Endorsment[i].lang +"' id='contenthover'>\n\
        <a class='delete'>\n\
        <img src='http://icons.iconarchive.com/icons/icojam/blue-bits/16/symbol-delete-icon.png' />\n\
        </a>\n\
        <span class='devider'>-</span>\n\
        <a class='mybutton'>\n\
        <img src='http://icons.iconarchive.com/icons/custom-icon-design/flatastic-1/16/comment-icon.png' />\n\
        </a>\n\
        <span class='devider'>-</span>\n\
        <a class='mybutton'>\n\
        <img src='http://icons.iconarchive.com/icons/icojam/blue-bits/16/information-icon.png' />\n\
        </a>\n\
      </div>\n\
    </div>";

    $('.endo_'+ obj.Endorsment[i].lang).click(function () {

    //$('#contenthover').toggle();
    alert(obj.Endorsment[i].lang);
});

这个LINK 谁能帮帮我？

Answer 1

您不必在 for 循环中使用您的点击代码。那没有意义..它将被插入没有。您的文档 (DOM) 中的次数。

使用伪查询选择器。这肯定会让您的工作更轻松。

  $("[class*='endo']").click(function () {    
    //do something here.
    $(this).next().toggle();   
});

next() 选择器从 DOM 中选择下一个兄弟。我制作了一个包装类来改进你的 CSS。看一下小提琴以更好地理解。

如果您删除包装类，您可能会发现显示“contenthover”时出现一些问题。

这是你的更新的小提琴。

http://jsfiddle.net/xK0nB1n/2jaLg60o/11/