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元素並突出顯示

回答

相關問題