動態地圖按鈕與div

Question

我想使用id動態鏈接按鈕與div的例子。

我有兩個按鈕和兩個div這是動態創建的，如果我點擊第二個按鈕它必須去第二個div如果我點擊第一個按鈕它第一個按鈕必須可見。使用純vanila javascript。

var inputElement = document.getElementById("inputAdd_page"); 
    var totalCount = 0; 
    inputElement.addEventListener('blur', function() { 
    var count = this.value; 
    if(count && !isNaN(count)) { 
     fragment = document.createDocumentFragment(); 
     for (var j = 0; j < count; ++j) { 
     spancount = document.createElement('span'); 
     prevPage = document.createElement('div'); 
     navbutton = document.createElement('button'); 
     preview_PageSize = document.getElementById('page'); 
      navpageBtn = document.getElementById('pageBtn'); 


     navbutton.className = "div_navig"; 
     navbutton.setAttribute('id', ['pag_navg' + totalCount]); 
     navbutton.innerHTML=[1 + totalCount]; 

     spancount.className = "spanCount"; 
     spancount.innerHTML=[1 + totalCount]; 

     prevPage.className = "preview_windowSize_element"; 
     prevPage.setAttribute('id', ['page' + (totalCount)]); 
     prevPage.appendChild(spancount); 
     navpageBtn.appendChild(navbutton); 

     prevPage.setAttribute('id', ['page' + (totalCount)]);   
     preview_PageSize.childNodes[0]); 
     totalCount++; 
    } 
    inputElement.value=""; 
    document.body.appendChild(fragment); 
    } 
}); 

這裏是小提琴Link

請幫我其實我想我沒有得到它

在此先感謝

Answer 1

我建議不使用的部分ID或類似的東西即鏈接你的元素。相反，請使用專門爲此目的創建的屬性。在下面的代碼中，我使用了一個名爲data-page的屬性，該屬性設置爲您要附加到ID的值。我還添加了一個事件，其只是將所有的頁面0的z指數，然後將所選擇的頁面的Z-指數10

//create div 
 
var inputElement = document.getElementById("inputAdd_page"); 
 
var totalCount = 0; 
 
inputElement.addEventListener('blur', function() { 
 
    var count = this.value; 
 
    // Gaurd condition 
 
    // Only if it is a number 
 
    if (count && !isNaN(count)) { 
 
    fragment = document.createDocumentFragment(); 
 
    for (var j = 0; j < count; ++j) { 
 
     spancount = document.createElement('span'); 
 
     prevPage = document.createElement('div'); 
 
     navbutton = document.createElement('button'); 
 
     preview_PageSize = document.getElementById('page'); 
 
     navpageBtn = document.getElementById('pageBtn'); 
 

 
     navbutton.className = "div_navig"; 
 
     navbutton.setAttribute('id', ['pag_navg' + totalCount]); 
 
     navbutton.setAttribute('data-page', totalCount); 
 
     navbutton.innerHTML = [1 + totalCount]; 
 
     navbutton.addEventListener('click', function (e) { 
 
     var el = e.target; 
 
     var page = parseInt(el.getAttribute('data-page'), 10); 
 
     var allPages = document.querySelectorAll('.preview_windowSize_element'); 
 
     Array.prototype.forEach.call(allPages, function (pageElement) { 
 
      pageElement.style.zIndex = 0; 
 
      }); 
 
     var pageEl = document.querySelector('div[data-page="' + page + '"]'); 
 
     pageEl.style.zIndex = 10; 
 
     }); 
 

 
     spancount.className = "spanCount"; 
 
     spancount.innerHTML = [1 + totalCount]; 
 

 
     prevPage.className = "preview_windowSize_element"; 
 
     prevPage.setAttribute('id', ['page' + (totalCount)]); 
 
     prevPage.setAttribute('data-page', totalCount); 
 
     prevPage.appendChild(spancount); 
 
     navpageBtn.appendChild(navbutton); 
 

 
     preview_PageSize.insertBefore(prevPage, preview_PageSize.childNodes[0]); 
 

 
     totalCount++; 
 
    } 
 

 
    inputElement.value = ""; 
 
    document.body.appendChild(fragment); 
 
    } 
 
});

.title_Textbox { 
 
    border: 1px solid rgb(152, 152, 152); 
 
    width: 230px; 
 
    padding: 5px 0 5px 5px; 
 
} 
 
.preview_windowSize { 
 
    margin: 15px 15px 15px 15px; 
 
    height: 300px; 
 
    padding: 5px; 
 
} 
 
.preview_windowSize_element { 
 
    position: absolute; 
 
    background-color: lightGrey; 
 
    border: 1px solid rgb(155, 155, 155); 
 
    border-bottom-right-radius: 10px; 
 
    border-bottom-left-radius: 10px; 
 
    padding: 5px; 
 
    width: 93.5%; 
 
    height: 300px; 
 
}

<input type="text" class="form-control title_Textbox" id="inputAdd_page" placeholder="No Of Pages"> 
 
<div class="preview_windowSize" id="page"> 
 

 
</div> 
 
<div id="pageBtn" class="row pagination_btn"> 
 

 
</div>