Question

我在这里找到了这篇文章https://www.startutorial.com/articles/view/easy-horizontal-scroll-showcase - 它可以让你滚动这个div > ul > li水平的设置。问题是我有一个表，我需要滚动tr元素...所以设置就像这个div > tbody > tr。你可以在下面看到我的代码，但目前它还没有工作。

注意：此HTML来自高级自定义字段和WP插件。

＆＃13;

$(document).ready(function() {
  //find div
  var div = $('div.acf-table');
  //find ul width
  var liNum = $(div).find('tbody').children('tr').length;
  var speed = 1000;
  var containerWidth = 848;
  var itemWidth = 212;
  //Remove scrollbars
  $(div).css({
    overflow: 'hidden'
  });
  $('div.right-arrow').click(function(e) {
    if (($(div).scrollLeft() + containerWidth) < (liNum * itemWidth)) {
      $(div).animate({
        scrollLeft: '+=' + containerWidth
      }, speed);
    }
  });
  $('div.left-arrow').click(function(e) {
    if (($(div).scrollLeft() + containerWidth) > containerWidth) {
      $(div).animate({
        scrollLeft: '-=' + containerWidth
      }, speed);
    }
  });
});

＆＃13;

.hs {
  width: 912px;
  margin: auto;
}

.hs tbody {
  list-style: none;
  margin: 0;
  padding: 0;
  white-space: nowrap;
}

.hs tbody tr {
  width: 200px;
  margin-right: 12px;
  display: inline-block;
}

.acf-table {
  /* Set it so we could calculate the offsetLeft */
  position: relative;
  height: 228px;
  width: 633px;
  /* Add scroll-bars */
  overflow: auto;
  float: left;
  display: block;
}

.left-arrow {
  width: 22px;
  height: 197px;
  display: block;
  margin-right: 10px;
  float: left;
}

.right-arrow {
  width: 22px;
  height: 197px;
  display: block;
  margin-left: 10px;
  float: left;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hs">
  <div class="left-arrow">
    <a href="#prev">
      <img src="images/scroller_left.gif" name="scroller_left" width="22" height="197" border="0">
    </a>
  </div>

  <table class="acf-table">
    <tbody style="width:99999px;">
      <tr>
        <td><img src="images/photos/Blue hills.jpg" width="200" height="197" /></td>
      </tr>
      <tr>
        <td><img src="images/photos/Sunset.jpg" width="200" height="197" /></td>
      </tr>
      <tr>
        <td><img src="images/photos/Water lilies.jpg" width="200" height="197" /></td>
      </tr>
      <tr>
        <td><img src="images/photos/Winter.jpg" width="200" height="197" /></td>
      </tr>
      <tr>
        <td><img src="images/photos/Winter.jpg" width="200" height="197" /></td>
      </tr>
    </tbody>
  </table>

  <div class="right-arrow">
    <a href="#next">
      <img src="images/scroller_right.gif" name="scroller_right" width="22" height="197" border="0">
    </a>
  </div>
</div>

＆＃13;

Answer 1

那是因为你的目标错了：

/* WORKING */ story current = new story(); current.setInc("12456"); realm.beginTransaction(); realm.insert(current); realm.commitTransaction(); /* NOT WORKING */ List<story> storylist = new ArrayList<>(); story current = new story(); current.setInc("12456"); storylist.add(current) realm.beginTransaction(); realm.insert(storylist); realm.commitTransaction();

包含var div = $('div.acf-table');类的HTML元素不是acf-table，而是div，因此要么说table，要么只说$('table.acf-table');。然后，点击它，它会水平滚动...

jQuery滚动表格的tr元素水平

1 个答案: