点击链接隐藏/显示内容

Question

我有一张表列出一些评论。在评论旁边有两个链接，hide和show。所以我想要做的是当点击右边的链接来改变评论的状态与Ajax。

// inside a loop for showing all comments 
<div class="pull-right" class="publish-history-comment"> 
    <a href="#" data-time="<?= $row->time; ?>" class="publish-history-comment-link" onclick="toggleHistoryNotes('publish');">Publish</a> 
</div> 
<div class="pull-right" class="hide-history-comment"> 
    <a href="#" data-time="<?= $row->time; ?>" class="hide-history-comment-link" onclick="toggleHistoryNotes('hide');">Hide</a> 
</div> 
<?= $row->comment; ?> 

<script type="text/javascript"> 
    function toggleHistoryNotes(status) { 
     var link = $('.' + status + '-history-comment-link'); 
     var time = link.attr('data-time'); 
     alert(time); 
    } 
</script> 

如何定位点击了哪个链接并执行ajax调用以切换评论状态？

Answer 1

你可以改变你的JQuery触发点击a标签。此外，您应该添加e.preventDefault();，因为这是要点击a标记，这将防止默认操作。

$('.pull-right a').on('click', function(e) { 
 
    e.preventDefault(); 
 
    var time = $(this).data('time'); 
 
    console.log($(this).text() + ' == ' + time); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="pull-right" class="publish-history-comment"> 
 
    <a href="#" data-time="2133124356354" class="publish-history-comment-link">Publish</a> 
 
</div> 
 
<div class="pull-right" class="hide-history-comment"> 
 
    <a href="#" data-time="2465433141212123" class="hide-history-comment-link">Hide</a> 
 
</div>

Answer 2

<script type="text/javascript"> 
    $('a').on('click', function(e) { 
     e.preventDefault(); 
     var time = $(this).data('time'); 
    }); 
</script>