目標動態創建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

回答

相關問題