Question

我尝试使用jQuery来实现以下功能。

https://docs.microsoft.com/en-us/dotnet/visual-basic/language-reference/statements/option-compare-statement

单击表格行时，将显示表格行中的info div，如果单击另一个表格行，则将隐藏当前显示的任何其他信息元素，并根据以下内容显示新的信息div已单击的表行。

问题是，代码无法正常工作。我已经玩了好几种选择，但我似乎无法达到预期的效果。

这将成为联系人页面的一部分，该表格将显示联系人列表，单击联系人时，您可以查看有关该特定联系人的更多数据。

请注意：使用表格并不重要，它可以是ul，ol，div ..任何东西。

＆＃13;

$(document).ready(function() {
  $(function() {
    $("tr").click(function() {
      if ($(this).find("> .info").css('display') == 'none') {
        $(this).find("> .info").show();
      } else {
        $(this).find("> .info").hide();
      }
    });
  });
});

＆＃13;

.info {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>Joe Bloggs</td>
    <td>joebloggs@email.com</td>
    <div class="info">555.555.555</div>
  </tr>
  <tr>
    <td>Sam Doe</td>
    <td>samdoe@email.com</td>
    <div class="info">556.556.556</div>
  </tr>
</table>

＆＃13;

Answer 1

首先，您错过了代码中的<tr>。

div元素不会直接用作tr的孩子
必须在div

td

修改

现在，您可以addClass使用tr child div元素和removeClass tr兄弟child div

以下是工作片段，您可以查看此内容。

＆＃13;
＆＃13;
$(document).ready(function(){ $("tr").click(function() { $(this).find("div[class*='info']").addClass('show'); $(this).siblings().find("div[class*='info']").removeClass('show'); }); });
＆＃13;
.info { display: none; } .show { display: block; }
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr> <td>Joe Bloggs</td> <td>joebloggs@email.com</td> <td><div class="info">555.555.555</div></td> </tr> <tr> <td>Sam Doe</td> <td>samdoe@email.com</td> <td><div class="info">556.556.556</div></td> </tr> </table>
＆＃13;
＆＃13;
＆＃13;

Answer 2

将缺少的<tr>添加到您的表格后，尝试使用.is(":visible")检查该元素是否为愿景

您也不需要在>

中使用.find("> .info")

以下示例。

＆＃13;

$(document).ready(function() {
  $(function() {
    $("tr").click(function() {
      if (!$(this).find(".info").is(":visible")) {
        $(this).find(".info").show();
      } else {
        $(this).find(".info").hide();
      }
    });
  });
});

＆＃13;

.info {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>Joe Bloggs</td>
    <td>joebloggs@email.com</td>
    <td>
      <div class="info">555.555.555</div>
    </td>
  </tr>
  <tr>
    <td>Sam Doe</td>
    <td>samdoe@email.com</td>
    <td>
      <div class="info">556.556.556</div>
    </td>
  </tr>
</table>

＆＃13;

Answer 3

您的代码存在一些问题：

首先，你不能使用div作为tr的直接子。你需要用td包装它。
无需运行两次jquery初始化： $(document).ready(function() { $(function() {

以下是如何执行此操作的示例： HTML：

<table>
  <tr>
    <td>Joe Bloggs</td>
    <td>joebloggs@email.com</td>
    </tr>
    <tr class="info">
      <td collspan="2"><div>555.555.555</div></td>
    </tr> 
    <tr>
    <td>Sam Doe</td>
    <td>samdoe@email.com</td>    
    </tr>
    <tr class="info">
      <td colspan="2">
          <div>556.556.556</div>
      </td>
    </tr>
</table>

JS：

$(function() {
    $('tr').not('.info').on('click', function() {
        $('.info').hide();
      $(this).next('.info').show();
    });      
  });

Answer 4

您可以使用这种方式实现您想要的目标

$(document).ready(function() {
    $('tr').click(function() {
    	$(this).next('.more-info').slideToggle('slow');
    });
});

table {border: solid 1px #000; border-collapse: collapse; width: 100%;}
table th, table td {border: solid 1px #000;}
.more-info {display: none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
		<thead>
			<tr>
				<th>thead</th>
				<th>thead</th>
				<th>thead</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>column</td>
				<td>column</td>
				<td>column</td>
			</tr>
			<tr class="more-info">
				<td colspan="3">More Info</td>
			</tr>
		</tbody>
	</table>

Answer 5

$("tr").on("click", function(){
  if ($(this).find(".info").css('display') == 'none') 
   {
       $(this).find(".info").show();
   } else 
   {
       $(this).find(".info").hide();
   }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<style>
.info {
  display: none;
}
</style>


<table>
  <tr>
    <td>Joe Bloggs</td>
    <td>joebloggs@email.com
       <div class="info">555.555.555</div>
    </td>
  </tr>
  <tr>
     <td>Sam Doe</td>
    <td>samdoe@email.com
      <div class="info">556.556.556</div>
    </td>
  </tr>
</table>

Answer 6

你不能直接使用div，但你可以使用它来实现同样的目的。

$(document).ready(function(){
  $(function() {
      $("tr").click(function() {
      $('tr.visible').removeClass('visible').addClass('info'); $(this).next('tr').addClass('visible').removeClass('info');          
      });
  });
});

.info {
  display: none;
}

.visible {
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table>
  <tr>
    <td>Joe Bloggs</td>
    <td>joebloggs@email.com</td>
    
  </tr>
  <tr class="info"><td colspan="2"><div>555.555.555</div></td></tr>
  <tr>
    <td>Sam Doe</td>
    <td>samdoe@email.com</td>
       <div class="info">556.556.556</div>
    </tr>
    <tr class="info"><td colspan="2"><div>556.556.556</div></td></tr>
</table>

单击表格行以显示更多信息

6 个答案: