Question

div中最初有5个按钮，我有一个代码来动态创建按钮，请参见下面的代码。

我的主要问题是在添加更多按钮之后。我有上下箭头按钮来滚动div。

我想在每次点击时滚动一个按钮或（一组按钮）。

现在，每次单击都会获得按钮的一部分。

如何在不考虑动态创建的按钮的宽度的情况下获得每次点击的完整按钮

这是我的HTML代码段

<div class="tabbar-fix" style="width: 11.2%;height: 89%;position: fixed;">
    <div class=" row" style="height:5%;width:100%">
        <div id="top-button" class="scroller" onclick="scrollLeftAbc();"><i class="glyphicon glyphicon-chevron-up"></i></a></div>
    </div>
    <div class="row" style="height:90%;width:100%;">
        <nav class="navbar navbar-inverse" id="nav-id-scroll">
            <ul class="nav navbar-nav" id="navbar-buttons">
                <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
                <li><a href="#about" data-toggle="tab">about</a></li>
                <li><a href="#services" data-toggle="tab">services</a></li>
                <li><a href="#contact" data-toggle="tab">contact</a></li>
                <li><a href="#contact" data-toggle="tab">contact</a></li>
                <li><a href="#services" data-toggle="tab">services</a></li>
            </ul>
        </nav>
    </div>
    <div id="down-button" class="row" style="height:5%;width:100%">
        <div class="scroller" onclick="scrollRightAbc();"><i class="glyphicon glyphicon-chevron-down"></i></a></div>
    </div>
</div>

我创建动态按钮的功能.....

function createButton() {
  var ul = document.getElementById("navbar-buttons");
  var li = document.createElement("li");
  var link = document.createElement("a");
  var name = document.getElementById("recipient-name").value;
  link.setAttribute("href", name);
  link.setAttribute("data-toggle", "tab");
  var textName = document.createTextNode(name);
  link.appendChild(textName);
  li.appendChild(link);
  ul.appendChild(li);
  // $(li).insertBefore("#lastIcon");
}

这就是我试图滚动按钮onclick的方式。

var test = 0;
function scrollToLeft() {
  test = document.querySelector("li").offsetWidth;
  console.log(test)
  document.getElementById('nav-id-scroll').scrollLeft += test;
}

function scrollToRight() {
  document.getElementById('nav-id-scroll').scrollLeft -= test;
}

Answer 1

让我们假设您要测量最后一个li或button的宽度（无论您添加了什么），因此这里是相同的代码。

var button_width = $('#navbar-buttons > li:last-of-type').width();

现在，您可以使用button_width的值进行游戏。或者，您可以使用$.each将所有按钮的宽度分别计算到array中。

如何查找动态创建的宽度

1 个答案: