要讓jQuery的執行多個操作或有另一種方式

是否有可能使一個jQuery按鈕同時做兩件事？現在我有這樣的：

<td> 
<a href="#'.$row['abstractid'].'"> 
    <button onClick="$(\'.hide\').toggle();">Read Abstract 
    </button> 
</a> 
</td>

這個作品（！耶） - 它既跳轉到並顯示被隱藏與數據庫ID號 - 股利，但因爲這些結果被環，它顯示了所有他們的。現在，它轉到頁面上的正確位置，但它仍然顯示所有結果，而不僅僅是一個結果。

我可以讓這個按鈕，以便它的onClick不僅切換隱藏也設置用於查詢的數據庫ID號來拉動，因此只顯示一組的結果，或只是僅顯示一個數據庫ID和集讓其他人隱藏起來？我是否必須將表ID設置爲數據庫ID，並將該類隱藏起來而不是將其放入div中？

例子：現在它：

<div id="'.$row['abstractid'].'" style="display:none;" class="hide"> 
<table> 
stuff 
</table>

但我需要使它

<table id="'.$row['abstractid'].'" style="display:none;" class="hide">

呢？這在理論上對我很有意義，但我認爲我必須對CSS有一點創意。

來源

2012-08-22 Melanie Sumner

是，jQuery的可以做你想做什麼;只要確保你的程序是正確的。把它寫在紙上，或者在評論中，一步一步地寫下來，直到它很有意義，然後編碼並微調代碼。 – Matt

您切換與類「隱藏」，而不是隻在特定的一個
你並不需要把一個按鈕爲錨（我甚至不知道這是否是允許的）所有項目。如果你需要它看起來像一個按鈕，你可以使用CSS。
ID必須以字母開頭，而不是數字。我猜你的abstractid是一個數字，因此我預設了abstr
如果你給一個元素類hide（這大概隱藏它），那麼你並不真的需要內聯樣式。

下面是更新後的代碼：

<a href="#abstr'.$row['abstractid'].'" onclick="$(\'#abstr'.$row['abstractid'].'\').toggle()">Read Abstract</a> 

<table id="abstr'.$row['abstractid'].'" class="hide">

來源

2012-08-22 14:55:11 Thomas

爲什麼ID需要以字母開頭？ –

Javascript的規則＃1，單獨的圖層。內聯onclick是不好的一般做法。 – bpeterson76

@the_red_baron它在HTML4規範http://www.w3.org/TR/html4/types.html#type-id但我剛剛發現HTML5沒有這種限制。 – Thomas

你可以使用onclick="function() {$(\'.hide\').toggle();$(\'.hide\').toggle();}"

不過，我不會建議。我的建議是：

<button class="read-abstract">Read Abstract</button>

然後

<script> 
$(document).ready(function() { 
    $(".read-abstract").live("click", function() { 
     // do stuff here 
    }); 
} 
</script>

更多關於不顯眼的Javascript：http://en.wikipedia.org/wiki/Unobtrusive_JavaScript

關於顯示和隱藏價值，我總是接近它像這樣：

HTML：

<button data-hide-id="1" class="read-abstract">Read Abstract</button> 
<table id="table-1" class="hide"> 
    <tr> 
     <td>Contents will show hide on click of read abstract</td> 
    </tr> 
</table>

個

JS（在<head>）：

<script type="text/javascript"> 
$(document).ready(function() { 
    $(".read-abstract").live("click", function() { 
     $("#table-" + $(this).data("hide-id")).toggle(); 
    }); 
} 
</script>

工作例如：http://jsfiddle.net/sZREt/

來源

2012-08-22 14:58:09 Matt

+1內聯屬性總是一個禁忌......偉大的建議！ – bpeterson76

@ bpeterson76我很喜歡將內聯屬性取出，但是對於表格數據，當我將其他屬性放在其他位置（放入css或放在腳本中）而不放在表格/ tr/td行中時，它們實際上從未顯示頁面...... –

你必須告訴我們你到底在說什麼，但總有一種方法可以獲得一個元素。這只是瞭解使用正確選擇器的問題。如果我正確地理解了你，你可以選擇一個類，或者通過table> row index>按鈕來選擇。 – bpeterson76

要讓jQuery的執行多個操作或有另一種方式

回答

相關問題