目标动态创建Div

我动态地创建使用JavaScript基于外部文本文件中的部分数的div数。该div最初是用一个图形填充的，但我希望能够将div分别切换到用于构建每个图形的原始数据。目标动态创建Div

如果文本文件有25个部分并创建25个div，我该如何“选择”说，第15个div切换到备用视图？

http://jsfiddle.net/EwNRJ/2357/ - 动态的解决方案

for (var i = 5; i < count+1; i++) { 
    new_divs += '<button class="div' + count + '_toggle">toggle ' + count + '</button>; 
    new_divs += '<div id="div' + count + '_main" class="main" ></div>'; 
    new_divs += '<div id="div' + count + '_alt" class="alt" ></div>'; 
}

来源

2015-09-05 Jesse Walton

你说的“选择”的意思是 - 通过代码访问（'$（“div容器”） .get（index）;'）或者能够点击然后移动到下一个视图（使用连接到容器的委托事件监听器）？ –

我的意思是通过代码访问，以便我可以隐藏该特定的div并显示替换它。 '$（ “div1_toggle_btn”）点击（函数（）{$ （ “div1_graph”）隐藏（）; $（ “div1_raw”）显示（）;} ' –

我刚认识你在你的评论中增加了一些代码，这与问题的不同之处在于，你可以添加一些示例HTML来显示图形，原始和切换按钮div的结构，可能比定位第n个div的问题在目前的形式中提出 –

使用jQuery的手动解决方案和框架的演示，选择所有的子元素$('.container .child')，然后你可以使用eq() function获得第n个元素。请注意，阵列零指数的，所以第五元素是元素4.

$(document).ready(function() { 
 
    // get 5th element (remember arrays are zero-indexed/start at 0) 
 
    var $fifth = $('.container .child').eq(4); 
 
    
 
    // show the fifth element has been selected by setting color to red 
 
    $fifth.css({color: 'red'}); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="child">1</div> 
 
    <div class="child">2</div> 
 
    <div class="child">3</div> 
 
    <div class="child">4</div> 
 
    <div class="child">5</div> 
 
    <div class="child">6</div> 
 
    <div class="child">7</div> 
 
    <div class="child">8</div> 
 
</div>

来源

2015-09-05 22:11:59

目标动态创建Div

回答

相关问题