Question

我有3个链接，这是学生的名字。点击第一次或奇数次的链接时，会出现另一个包含该学生详细信息的div。在第二次或偶数次点击同一链接时，我需要隐藏学生div。它使用data() jquery事件完美地为我工作。

我的要求是，如果我点击第一个学生链接，div将会显示第一个学生的详细信息。如果我点击第二个学生链接，第二个学生的详细信息将会到来。如果我再次点击第一个链接，学生div将隐藏，因为data()与之关联（我认为是）。但是我想让它显示出来，因为之前的点击是在第二个链接上。

我的HTML就像这样

<a href="" id="24" class="student_link">George</a>

<a href="" id="25" class="student_link">Leo</a>

<a href="" id="26" class="student_link">Kelm</a>

我的jquery：

$("#sections ").on('click','.student_link',function(){
       var clicks = $(this).data('clicks');
      //alert(clicks);
      if (clicks) {
         $("#div_students").hide();
         //alert(1); 
      }
      else
      {
         $("#div_students").show();
         //alert(2);
      }

      $(this).data("clicks", !clicks);
      return false;
   });

如果我第一次点击George，相应的学生div会出现，如果我点击Leo而不点击George隐藏div，我需要Leo div应该来。如果我再次点击George，我需要div有关George的详细信息应该来了。但是对于我来说div是隐藏的，因为变量点击对于George来说已经是真的。如果之前的点击不在当前链接上，我需要显示div。

Answer 1

您可以使用以下代码：

$("#sections").on('click', '.student_link', function () {
    var prevClickedId = $('#sections').data('prevId');

    if (prevClickedId != $(this).attr('id')) {
        // This was not the previous clicked element
    } else {
        // This was the previous clicked element
    }

    $('#sections').data('prevId', $(this).attr('id'));
    return false;
});

Answer 2

你可以这样：

$("#sections").on('click', '.student_link', function(){
    if( $("#div_students").data('viewing') == $(this).attr('id') ) {
        $("#div_students").hide().data('viewing', '');
    }
    else {
        $("#div_students").show().text($(this).attr('id'));
        $("#div_students").data('viewing', $(this).attr('id'));
    }
    return false;
});

以下是一个有效的例子：https://jsfiddle.net/7qwsguoq/

Answer 3

为什么不使用jquery toggle()方法？它隐藏元素，当它被隐藏时显示。

奇怪的点击创建不同的功能甚至点击链接

3 个答案: