jQuery 切换器行为不符合预期

Question

我有一个正在使用的 jQuery 切换器。我可以让它同时切换多个 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';
    });
});
});

这只会切换 more +/less - 而不是 .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 相同），这也必然会破坏 DOM 中无法转换为 HTML 标记字符串的所有信息。其中包括表单字段值、JavaScript 引用和事件处理程序。

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

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

Answer 2

从你写的方式来看，

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

我猜你想在 jQuery(this) 之后找到下一个 .hiddentText ？这不是 .next() 的工作原理。我不会找到下一个同级，而是通过可选选择器过滤它。

则可以使用。

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

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