Question

我有一个jQuery toggler，我正在与之斗争。我可以让它同时切换多个div的可见性，但是一旦我实现next（）函数，切换的唯一内容就是脚本的加/减部分，而不是div的可见性。这段代码中有什么突出的东西吗？

这样可行，但切换所有div而不只是关闭一个：

jQuery(function(){
 jQuery(".toggleText").click(function(){
  jQuery(".hiddenText").slideToggle("fast");
        jQuery(this).html(function(i,html) {
            if (html.indexOf('More') != -1 ){
               html = html.replace('More','Less');
            } else {
               html = html.replace('Less','More');
            }
            return html;
        }).find('img').attr('src',function(i,src){
        return (src.indexOf('plus.gif') != -1)? 'minus.gif' :'plus.gif';
    });
});
});

这只会切换更多+ /更少 - 而不是.hiddenText div。（这两者的唯一区别是在第三行添加了next（））。

jQuery(function(){
 jQuery(".toggleText").click(function(){
 jQuery(this).next(".hiddenText").slideToggle("none");
        jQuery(this).html(function(i,html) {
            if (html.indexOf('More') != -1 ){
               html = html.replace('More','Less');
            } else {
               html = html.replace('Less','More');
            }
            return html;
        }).find('img').attr('src',function(i,src){
        return (src.indexOf('plus.gif') != -1)? 'minus.gif' :'plus.gif';
    });
});
});

有什么想法吗？

PS：我使用jQuery代替$，因为与此代码存在的CMS发生冲突。英寸

Answer 1

jQuery(this).html(function(i,html) {

不要使用html() / innerHTML。它没有按你的想法行事。

执行此操作时，您要求浏览器将其当前文档模型序列化为HTML字符串。然后你调整HTML并将其写回来，此时浏览器必须销毁所有现有的元素内容，并将其替换为从HTML字符串解析的新DOM节点。

除了缓慢且不可靠之外（因为您实际上不知道浏览器选择将内容序列化的确切格式; 不会与您提供的原始HTML相同it），这也必然会破坏DOM中无法转换为HTML标记字符串的所有信息。这包括表单字段值，JavaScript引用和事件处理程序。

因此，当您回写HTML时，您将丢失该标记中元素的所有click个事件，包括打开/关闭箭头上的那些事件。

忘记HTML字符串黑客攻击。直接处理DOM元素，直接使用text() / More文本内容更改每个元素的Less。

Answer 2

从你的写作方式

jQuery(this).next(".hiddenText")

我猜你想在.hiddentText之后找到下一个jQuery(this)？这不是.next()的工作方式。我不会找到下一个兄弟，但可以通过可选的选择器对其进行过滤。

您可以使用

jQuery(this).parent().children(".hiddenText")

如果.hiddentText的父级中只有一个jQuery(this)。

jQuery toggler行为不像预期的那样

2 个答案: