Question

我正在尝试使用jquery函数来处理表行。我的解决方案基于following stack overflow question，但每当我点击展开链接时，似乎没有任何事情发生。我试图调试javascript代码，但它没有达到它。

以下是供参考的HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <style>       td { white-space: pre }       p { display: none }   </style>   
   <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
   <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
   <script>
$("a[data-toggle]").on("click", function(e) {
       e.preventDefault();  // prevent navigating
       var selector = $(this).data("toggle");  // get corresponding element
       $("p").hide();
       $(selector).show();
   });   
   </script>
</head>
<body>
<table class="table table-striped table-condensed table-hover" style="border-collapse: collapse">
<thead>
    <tr>
        <th class="confluenceTh"></th>
        <th class="confluenceTh">a1</th>
        <th class="confluenceTh">a2</th>
        <th class="confluenceTh">a3</th>
    </tr>
</thead>
<tbody>
<tr>  
  <td class="confluenceTd"><a href ="#" data-toggle="#content0">Expand</button></td>
  <td class="confluenceTd">b1</td>
  <td class="confluenceTd">b2</td>
  <td class="confluenceTd">b3</td>
</tr>
<tr>  
<td colspan = "4" class="confluenceTd">
<p id="content1" class="expanding-content">val1</p>
</td>
</tr>
<tr>  
  <td class="confluenceTd"><a href ="#" data-toggle="#content1">Expand</button></td>
  <td class="confluenceTd">c1</td>
  <td class="confluenceTd">c2</td>
  <td class="confluenceTd">c3</td>
</tr>
<tr>  
<td colspan = "4" class="confluenceTd">
<p id="content1" class="expanding-content">val2</p>
</td>
</tr>

</tbody>
</table>
</body>
</html>

谢谢！

Answer 1

您有两种选择：

将代码包装在$(document).ready
将身体标记放在文件底部（benefits）

您的代码也与目标元素不匹配。

$("a[data-toggle]").on("click", function(e) {
  e.preventDefault(); // prevent navigating
  var selector = $(this).data("toggle"); // get corresponding element
  $("p").hide();
  $(selector).show();
});

.expanding-content {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table class="table table-striped table-condensed table-hover" style="border-collapse: collapse">
  <thead>
    <tr>
      <th class="confluenceTh"></th>
      <th class="confluenceTh">a1</th>
      <th class="confluenceTh">a2</th>
      <th class="confluenceTh">a3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="confluenceTd"><a href="#" data-toggle="#content1">Expand</button></td>
  <td class="confluenceTd">b1</td>
  <td class="confluenceTd">b2</td>
  <td class="confluenceTd">b3</td>
</tr>
<tr>  
<td colspan = "4" class="confluenceTd">
<p id="content1" class="expanding-content">val1</p>
</td>
</tr>
<tr>  
  <td class="confluenceTd"><a href ="#" data-toggle="#content2">Expand</button></td>
  <td class="confluenceTd">c1</td>
  <td class="confluenceTd">c2</td>
  <td class="confluenceTd">c3</td>
</tr>
<tr>  
<td colspan = "4" class="confluenceTd">
<p id="content2" class="expanding-content">val2</p>
</td>
</tr>

</tbody>
</table>

Answer 2

将代码包装在文档就绪语句

中

$( document ).ready(function() {
  // Handler for .ready() called.
});

Answer 3

这里的东西是你的jquery选择器，你错误地定位你的链接，试试这个：

    <script>
    $("a[data-toggle=*]").on("click", function(e) {
       e.preventDefault();  // prevent navigating
       var selector = $(this).data("toggle");  // get corresponding element
       $("p").hide();
       $(selector).show();
   });   
   </script>

通过这种方式，您将定位所有A标签，其中包含数据切换，其中包含任何值。

Answer 4

另一种方式：

<强> WORKING DEMO

<table class="table table-striped table-condensed table-hover" style="border-collapse: collapse">
<thead>
    <tr>
        <th class="confluenceTh"></th>
        <th class="confluenceTh">a1</th>
        <th class="confluenceTh">a2</th>
        <th class="confluenceTh">a3</th>
    </tr>
</thead>
<tbody>
<tr>  
  <td class="confluenceTd"><a href ="#" data-toggle="#content0">Expand</button></td>
  <td class="confluenceTd">b1</td>
  <td class="confluenceTd">b2</td>
  <td class="confluenceTd">b3</td>
</tr>
<tr>  
<td colspan = "4" class="confluenceTd">
<p id="content0" class="expanding-content">val1</p>
</td>
</tr>
<tr>  
  <td class="confluenceTd"><a href ="#" data-toggle="#content1">Expand</button></td>
  <td class="confluenceTd">c1</td>
  <td class="confluenceTd">c2</td>
  <td class="confluenceTd">c3</td>
</tr>
<tr>  
<td colspan = "4" class="confluenceTd">
<p id="content1" class="expanding-content">val2</p>
</td>
</tr>

</tbody>
</table>

JS：

$(document).on("click","a[data-toggle]", function(e) {
  e.preventDefault();  // prevent navigating
  var selector = $(this).data("toggle");  // get corresponding element
  $("p").hide();
  $(selector).show();
});

使用jquery切换特定段落不起作用

4 个答案: