使用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切換特定段落不起作用

回答

相關問題