javascript - 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。 (奇迹)。但其他浏览器则不然...这个想法是，当您单击“LINK”时，会出现一个窗口，当您再次单击时，该窗口会关闭。

有什么想法吗？

谢谢您的宝贵时间!

Answer 1

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

我建议使用 HTML5 data-*属性来指定 id对于<div>在您的<a>上元素:

<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> 元素)。