javascript - 使用 div 动态映射按钮

Question

例如，我想使用 id 将按钮与 div 动态链接。

我有两个按钮和两个 div 这是动态创建的如果我单击第二个按钮它必须转到第二个 div 如果我单击第一个按钮它第一个按钮必须可见。使用纯 Vanilla 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);
  }
});

这是 fiddle Link

请帮助我，实际上我正在尝试我没有得到它

提前致谢

Answer 1

我建议不要使用部分 ID 或类似的东西来链接您的元素。相反，使用专门为此目的创建的属性。在下面的代码中，我使用了一个名为 data-page 的属性，它只是设置为您附加到 id 的值。我还添加了一个事件处理程序，它将所有页面的 z-index 设置为 0，然后将所选页面的 z-index 设置为 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>