Question

可能是初学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或小提琴中不起作用。任何帮助将不胜感激。

Answer 1

我建议您不要将您的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的首选元素，但您在链接中添加了属性，因此它知道要切换的内容：http://jsfiddle.net/PrmX5/4/

我添加了html5 data-属性来识别需要从js附加切换函数的锚点，你可以使用类或其他（更快的？）jQuery选择器来做到这一点。

正如@coosal在答案中所说，如果div是动态生成的（ajax或客户端），你需要使用live而不是绑定document.ready，所以这里是使用live的版本：{{ 3}}

Answer 2

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

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

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

Answer 3

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

jQuery("#toggle-icon152").live("click",function(){
togglemydiv("content152");
changeicon("icon152");
})

Answer 4

假设你已经在某处编写了togglemydiv并且它需要一个id作为参数，你需要将'content152'放在引号中 - 否则它会尝试将一个不存在的对象传递给你的函数（它的概率是未定义的类型

正如亚历克斯上面提到的那样，你应该将你的javascript与HTML标签分开 - 这是最佳实践..

调用jquery函数onclick事件

4 个答案: