IE9 上的基本 jQuery 问题(切换)

Question

我不是真正的开发人员。我更喜欢设计我的网站...因此，对于我的实际项目，我必须开发一些"基本"脚本。

我遇到了一个问题：

<script type="text/javascript">
$("button").click(function toggleDiv(divId) {
$("#"+divId).toggle();
});
;
</script>

进入头部-/头部

<a href="javascript:toggleDiv('myContent');">LINK</a> 
<div> id="myContent">Lorem Ipsum</div>

它适用于IE8。（奇迹）。但不是其他浏览器...这个想法是，当您单击"链接"时，会出现一个窗口，当您再次单击时，窗口将关闭。

知道吗？

谢谢你的时间！

Answer 1

其中一个

问题是你混合了两种不同风格的绑定事件处理程序：其中一个是好的（jQuery 方法），另一个是坏的（href属性中的javascript:协议） - 两者不能以任何方式协同工作。另一个问题是，对于您提供的 HTML，您的选择器完全不正确（它正在寻找一个按钮）（您从未创建过按钮）。

我建议使用 HTML5 data-* 属性来指定 <a> 元素上<div>的id：

<a href="#" data-divid="mycontent">LINK</a>
<div id="mycontent">Lorem ipsum</div>

然后使用以下 jQuery 代码：

$('a').click(function(e) {
    e.preventDefault(); // e refers to the event (the click),
    // calling preventDefault() will stop you following the link
    var divId = $(this).data('divid');
    $('#' + divId).toggle();
});

请注意，我在上面的代码中使用了this;this指的是什么取决于你使用它的上下文，但在 jQuery 事件处理程序回调函数的上下文中，它将始终引用触发事件的元素（在本例中为您的 <a> 元素）。

Answer 2

如果你从处理程序中提取 toggleDiv，它应该可以工作。 您可能还需要返回 false 以防止 href 尝试去任何地方。

<script type="text/javascript">
    function toggleDiv(divId) {
        $("#"+divId).toggle();
        return false;
    }
</script>