javascript - 单击链接隐藏/显示内容

Question

我有一个表格，其中列出了一些评论。评论旁边有两个链接，隐藏和显示。所以我想做的是当点击正确的链接时用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>