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

其中一个问题是你混合了两种不同风格的绑定事件处理程序：其中一种是好的（jQuery方法），另一种是坏的（你的javascript: href协议属性） - 两者不以任何方式一起工作。另一个问题是你的选择器完全不正确（它正在寻找一个按钮）你所提供的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事件处理程序回调函数的上下文中，它将始终引用触发事件的元素（在本例中，您的{{1元素）。

Answer 2

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

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

IE9上的基本jQuery问题（切换）

2 个答案: