2

可能是初学者 jquery 问题......这是我的问题：

我已经动态创建了 div 元素列表。每个都有其特定的内容、ID 和角落中的切换图标。当我按下切换图标时，它会导致以下内容：展开/隐藏 div 的内容并更改图标。

我最初的想法是调用 2 个类似这样的自定义 jquery 函数（数字由 PHP 动态插入）：

<div id="div152" >
  <div id="content152">some content</div>
  <a id="toggle-icon152" href="javascript:void(0);" onclick="togglemydiv(content152); changeicon(icon152)">
    <div id="icon152">someicon</div>
  </a>
</div>

现在这在某些浏览器中有效，但显然它不应该这样做，因为它在 Windows 或小提琴中的 FF 中不起作用。任何帮助，将不胜感激。

4

4 回答 4

4

我建议你不要将你的 id 硬编码到 js 中。

这是一个如何更简单的建议：

html:

<div id="div152" >
  <div id="content152">some content</div>
  <a id="toggle-icon152" data-bind-action="toggle-content" href="#">
    <div id="icon152">someicon</div>
  </a>
</div>​

js：

$("a[data-bind-action='toggle-content']").click(toggleContent);

function toggleContent(){
    var a = $(this);
    var div = a.prev();
    div.toggle();
    e.preventDefault();
    return false;
}

看看它在jsfiddle上是如何工作的。

这是不假定您的内容是 a 的 prev 元素的版本，但是您向链接添加属性，以便它知道要切换的内容：http: //jsfiddle.net/PrmX5/4/

我添加了 html5 数据属性来识别需要从 js 附加切换功能的锚点，当然，您可以使用类或其他（更快？）jQuery 选择器来执行此操作。

正如@coosal 在其回答中所说，如果 div 是动态生成的（ajax 或在客户端上），您需要使用live而不是绑定 document.ready，所以这里是使用 live 的版本：http: //jsfiddle.net/PrmX5/ 5/

于 2012-09-06T17:15:52.587 回答
3

我建议使用外部脚本而不是内联 JS

$('#toggle-icon152').on('click', function(e){ 
   $('#content152').toggle();  // or do something else
   e.preventDefault();
}

参考http://api.jquery.com/toggle/

于 2012-09-06T17:12:37.823 回答
2

由于divs是动态生成的，我们需要 live() 函数来触发任何事件。. 检查jquery 的live()函数

jQuery("#toggle-icon152").live("click",function(){
togglemydiv("content152");
changeicon("icon152");
})
于 2012-09-06T17:17:12.567 回答
0

假设您已经在某处编写了 togglemydiv 并且它需要一个 id 作为其参数，您需要将 'content152' 放在引号中 - 否则它会尝试将一个不存在的对象传递到您的函数中（它可能正在通过作为类型未定义）

正如上面的 alex 建议的那样，您应该将您的 javascript 与您的 HTML 标记分开——这是最佳实践。

于 2012-09-06T17:18:57.733 回答