Question

以下是点击图标的html代码：

<a href="javascript:void(0)" class="stat-item remark" id='id' rel='msg_id' title='Give your Remarks on it'>
  <i class="fa fa-comments-o icon"></i>
</a>

这是要加载div的html

<div class="post-footer" id="post-footer">
  <p>Loading the list</p>
</div>

这是我使用的jQuery

$(document).ready(function(){
  $(".stat-item.remark").on("click", function( e ) {
    $(".post-footer").slideToggle();
  });
});

我的项目包括显示几个div（使用php＆＃39; s fetcharray循环函数从db中提取），其中包含不同的内容。但是div的后页脚类在我能看到的每个div中是相同的，图标。我的问题是，当我点击图标时，我可以将所有名为＆＃39; post-footer＆＃39;是slideToggling。如何使用每个图标点击独立滑动切换（class =＆＃34; stat-item remark＆＃34;）？

Answer 1

通过在您的链接中存储相关data-*的{{1}}来使用data-id属性，如：

post-footer

然后点击获取<a href="" class="stat-item remark" data-msg-id="<?php echo $omsg_id;?>" title='Give your Remarks on it'> <i class="fa fa-comments-o icon"></i> </a> <div class="post-footer" id="post-footer-<?php echo $omsg_id;?>"> <p>Loading the list</p> </div>属性并定位相关的data-id：

post_footer

希望这有帮助。

＆＃13;

$(document).ready(function(){
  $(".stat-item.remark").on("click", function( e ) 
  {
      e.preventDefault();

      var post_footer_id = "#post-footer-"+$(this).data('msg-id');

      $(post_footer_id).slideToggle();
  });
});

＆＃13;

$(document).ready(function(){
  $(".stat-item.remark").on("click", function( e ) {
    var post_footer_id = "#post-footer-"+$(this).data('id');
    $(post_footer_id).css({backgroundColor: 'yellow'});
  });
});

＆＃13;

Answer 2

如果链接和div彼此相邻，则执行next()：

<a href="javascript:void(0)" class="stat-item remark" id='<?php echo $omsg_id;?>'rel='<?php echo $msg_id;?>' title='Give your Remarks on it'>
  <i class="fa fa-comments-o icon"></i>
</a>  
<div class="post-footer" id="post-footer">
  <p>Loading the list</p>
</div>

JS：

$(document).ready(function(){
        $(".stat-item.remark").on("click", function(e) {
          $(this).next(".post-footer").slideToggle();
        });
});

独特的Div不滑动在特定图标点击上切换

2 个答案: