Question

我创建了一个表，其中包含从ajax调用中获取的值，每个表都有一个带有data-id属性的锚标记。

此外，我使用相同的值动态创建了一个时间轴视图（默认情况下隐藏），并且有一个scrollview - 因为有1000个事件。

当用户点击锚标记时，如何在时间轴中移动到该特定的li元素并隐藏表格。

＆＃13;

function create_table(data) {
  var tr = $('<tr>');
  $.each(data, function(idx, ele) {
      tr.append("<<td><p><a class='details' data-id='" + data['id'] + "href=" + data['link'] + "> Link </a></p></td>")
    }
    $('tbody').append(tr);
  }

  function create_time(data) {
    var ul = $("<ul>");
    $.each(data, function(idx, ele) {
        ul.append("<li id=" + data['id'] + "><div>" +
          data['player_name'] + "</div></li>");
      }
      $(".vertical-timeline").append(ul)
    }

    $("a.details").on("click", function(e) {
      e.preventDefault();
      $(".player_div").hide();
      $(".player_timeline").show();

      // MOVE TO PARTICULAR LI 

    });

    CSS
      .player_timeline {
        height: 700 px;
        margin - bottom: 100 px;
      }

      .vertical - timeline {
        overflow - y: scroll;
        height: 500 px;
      }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="player-div">
  <table class="table table-responsive">
    <tbody>

    </tbody>
  </table>
</section <section class="player_timeline" style="display:none;">
<div class="vertical-timeline">
</div>
</section>

＆＃13;

Answer 1

假设您正在使用jQuery，您可以附加这样的事件

$("a.details").on("click", function(e){
    e.preventDefault();
    $(".player_div").hide();
    $(".player_timeline").show();

    $('html, body').animate({
      scrollTop: $(".player_timeline").offset().top
    }, 2000);
    $(".player_timeline").animate({
      scrollTop: $('li to scroll').offset().top
    }, 2000);
});

让我知道它是否适合你。

Answer 2

$("a.details").on("click", function(e){
e.preventDefault();
$(".player_div").hide();
$(".player_timeline").show();
var id = $(this).attr("data-id");
$('html,body').animate({ scrollTop: $("li #" + id).offset().top - 1000 }, 'slow');
});

希望上面的代码可以帮助你。

jQuery - onClick锚标签移动到动态创建的div li元素并突出显示它

2 个答案: