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

我想让jquery函数在表格行上工作。我将我的解决方案放在following stack overflow question上，然而每当我点击展开链接时，似乎都没有发生。我试图调试JavaScript代码，但它不能达到它。使用jQuery切换特定段落不起作用

下面是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>

谢谢！这里

来源

2015-04-17 jonatzin

包裹的代码在文档准备好声明 – madalinivascu

当然！太愚蠢了！ – jonatzin

@madalinivascu你可以请你发布你的解决方案，我可以接受吗？ – jonatzin

你有两个选择：

包裹在$(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>

来源

2015-04-17 11:43:24 nirmal

的事情是你的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标签，用数据切换，内带任何价值。

来源

2015-04-17 11:43:17 taxicala

的另一种方法：

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(); 
});

来源

2015-04-17 11:46:17

包裹的代码在文档准备好声明

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

来源

2015-04-17 11:48:02 madalinivascu

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

回答

相关问题