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

我创建了一个表，其中包含从ajax调用中获取的值，并且每个表都具有带data-id属性的锚点标记。jQuery - 锚点标记的onClick移动到动态创建div li元素并突出显示

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

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

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; 
 
     }

<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>

来源

2017-10-05 Rinsen S

没有你的代码，它可以是很难为你提供一个正确的答案，因为我们只能猜测你的代码看起来像 –

对不起加入 –

@RinsenS你试过'码$（文件）。在（“点击“，”a.details“，函数（e）{'？ –

假设你正在使用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); 
});

让我知道它是否适合你。

来源

2017-10-05 06:37:55 Tapas

不，它不起作用。由于整个时间轴都在它自己的滚动视图中 - 我无法触及到该元素 –

然后你需要执行两个滚动条，首先是第二个滚动视图的父级，然后是视图内的另一个滚动条，但我只是给你一个想法 – Tapas

是的，我需要这样做，但我我无法找到解决方案，并感谢您的想法！ –

$("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'); 
});

希望以上代码可以帮助您。

来源

2017-10-05 07:11:30 user8375429

对不起，它没有工作:( –

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

回答

相关问题