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

【问题标题】：Toggling specific paragraphs using jquery doesn't work使用 jquery 切换特定段落不起作用
【发布时间】：2015-04-17 11:35:16
【问题描述】：

我正在尝试让 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>

谢谢！

【问题讨论】：

将代码包装在文档就绪语句中
当然！！！太傻了！
@madalinivascu 能否请您发布您的解决方案以便我接受？

标签： javascript jquery html google-chrome

【解决方案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>

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案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 标记，其中包含任何值的数据切换。

【讨论】：

【解决方案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();
});

【讨论】：