0

基于上一个问题，

是否可以让 jquery 按钮一次做两件事？现在我有这个：

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

这有效（耶！） - 它既跳转到并显示使用该数据库 ID 号隐藏的 div - 但由于这些结果是循环的，它会显示所有这些结果。现在，它转到页面上的正确位置，但它仍然显示所有结果，而不仅仅是一个结果。

我可以制作这个按钮，所以 onClick 它不仅可以切换隐藏，还可以设置要拉取的查询的数据库 ID 号，因此它只显示一组结果 - 或者只显示一个数据库 ID 集而隐藏其他数据库 ID 集？我是否必须将表 id 设置为数据库 id 并赋予该类 hidden 而不是将其放入 div 中？

示例：现在是：

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

但我需要做到吗

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

反而？这在理论上对我来说是有道理的，但我认为我的 CSS 必须有点创意。

4

2 回答 2

2

你可以使用 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-22T14:58:09.393 回答
0
  1. 您使用“隐藏”类切换所有项目，而不仅仅是特定项目
  2. 您不需要将按钮放入锚点（我什至不知道是否允许）。如果你需要它看起来像一个按钮，你可以使用 CSS。
  3. ID 必须以字母而不是数字开头。我猜你abstractid是一个数字，所以我在前面abstr
  4. 如果你给一个元素类hide（可能隐藏它），那么你真的不需要内联样式。

这是更新的代码：

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

<table id="abstr'.$row['abstractid'].'" class="hide">
于 2012-08-22T14:55:11.750 回答