jQuery - アンカータグをオンクリックすると、div要素が動的に作成され、強調表示されます。

Question

ajax呼び出しから値を取得したテーブルを作成し、それぞれにdata-id属性のアンカータグがあります。

また、同じ値で動的にタイムラインビュー（デフォルトでは非表示）が作成されており、スクロールビューがあります（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>

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

希望するコードをお手伝いします。