0

我想使用 jquery 从文本链接中显示/隐藏 DIV。

到目前为止，它与我在该网站上找到的示例略有不同的是，我需要一种通用的方法来在一个页面上多次执行它，并且还能够在任何页面上使用它。

如果我可以将 JS 放在包含在页面中的单独文件中，那就太好了，所以也许可以将它包装成一个函数？

有人可以在这里帮助我吗？为了使其通用，我可以在其中分配一个显示/隐藏的 div，其 id 为id="toggle-hide-1"并且只需更改我页面中的数字以使其成为不同的显示/隐藏区域

我可以只使用一个名称来命名 ID，该名称将使函数显示/隐藏一个 div，并将它与在页面上显示/隐藏的其他 div 分开，我可以向它添加一个数字。

下面是部分代码，它将在链接单击时显示/隐藏 div，但不完全是我需要的。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script type="text/javascript" >
$(function() { 
    $(".view-code").click(function(evt) {
        $(".tool_block, .view-code").toggle();
    }); 
});
</script>
<a href="#" class="view-code" >view code</a>
<a href="#" class="view-code"  style="display:none">hide code</a> <br  />

<div class="tool_block" style="display:none" >
this stuff is hidden until we choose to show it!
</div>
4

3 回答 3

3

最好的方法可能是使用自定义属性。如果您使用一个属性标记您的锚点，该属性告诉 jquery 要切换哪个 div，则编写通用代码来完成这项工作会更容易。

像这样的东西：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script type="text/javascript" >
$(function() { 
    $(".view-code").click(function(evt) {
        var d = $(this).attr("toolDiv");
        $(".tool_block[toolDiv=" + d + "], .view-code[toolDiv=" + d + "]").toggle();
    }); 
});
</script>
<a href="#" class="view-code" toolDiv="1" >view code</a>
<a href="#" class="view-code" toolDiv="1" style="display:none">hide code</a> <br  />

<div class="tool_block" toolDiv="1" style="display:none" >
this stuff is hidden until we choose to show it!
</div>

然后给每个锚-div 对一个唯一的 toolDiv 值（不必是数字）。

于 2009-09-05T20:38:52.047 回答
1

如果您可以将整个集合包装在一个 div 中，那将非常容易。

$(function() {
    $(".view-code").click( function(e) {
        $(this).siblings().andSelf().toggle();
    });
});

<div>
    <a href="#" class="view-code" >view code</a>
    <a href="#" class="view-code"  style="display:none">hide code</a> <br  />

    <div class="tool_block" style="display:none" >
    this stuff is hidden until we choose to show it!
    </div>
</div>

如果它不处理<br />，您可以将兄弟姐妹过滤为仅 div 和锚元素。

于 2009-09-05T20:38:07.323 回答
0

为什么不使用特定的类呢？您想要显示/隐藏的每个元素都可以有一个名为“toggler”的类，如下所示：

<div class="toggler">
 ...
</div>

然后，您可以使用该类一次切换所有元素的可见性，使用：

$(".toggler").toggle();

在这种情况下，这些元素在文档中的位置，甚至它们是什么类型的元素都没有区别。

如果此功能需要全局可用，您始终可以使用自定义函数扩展 jQuery 本身，如下所示：

$.toggleTogglers = function(toggleClass) {
  $("." + toggleClass).toggle();
};

这很好，因为您可以灵活地选择自己设计的切换自定义类。

于 2009-09-05T20:52:24.173 回答