点击链接隐藏/显示内容

时间:2017-07-19 09:32:25

标签: javascript jquery

我有一张列出一些评论的表格。评论旁边有两个链接,hideshow。所以我想要做的是点击右侧链接以使用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调用以切换评论状态?

2 个答案:

答案 0 :(得分:1)

您可以点击a标记将JQuery更改为触发。此外,您应该添加e.preventDefault();,因为这将点击a标记,这样可以防止默认操作。

&#13;
&#13;
$('.pull-right a').on('click', function(e) {
  e.preventDefault();
  var time = $(this).data('time');
  console.log($(this).text() + ' == ' + time);
});
&#13;
<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>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
    <shape android:shape="oval">
        <stroke android:width="2dp" android:color="@color/colorPrimary" />
        <solid android:color="@color/colorPrimary"/>
    </shape>
</item>