innerHTML 的问题答案

【问题标题】：Problems with innerHTMLinnerHTML 的问题
【发布时间】：2015-03-10 06:38:54
【问题描述】：

我有一个折叠表，其中包含折叠其内容的链接。我想使用 JS 更改链接（例如，从“+”到“-”并向后）。我做到了，但我的桌子停止倒塌。这是代码：

<div class="panel-group" id="accordion">

   <h6>
        <a class="collapsed" data-toggle="collapse"
        id="element${result.index}" data-parent="#accordion"
        href="#collapse${result.index}"
        onClick="javascript:changeText(${result.index})"><span
        class="glyphicon glyphicon-plus"></span></a>&nbsp; ${result.name}
   </h6>

   <div id="collapse${result.index}"
   class="panel-collapse collapse">
         <div class="panel-body">

等等。功能：

function changeText(idElement) {        
        var element = document.getElementById('element' + idElement);      
        if (element.innerHTML === '<span class="glyphicon glyphicon-plus"></span>')         
            {           
            //element.innerHTML = '<span class="glyphicon glyphicon-minus"></span>';
            }
        else {          
            //element.innerHTML = '<span class="glyphicon glyphicon-plus"></span>';
            }
     }

如果我评论innerHTML 部分，表格会折叠，但图标不会改变。如果我删除 cmets，图标会更改，但表格不会折叠。我怎样才能避免这件事？

【问题讨论】：

标签： javascript jquery html twitter-bootstrap jstl

【解决方案1】：

您不应使用innerHTML，因为它会删除事件绑定。在您的情况下，您可以简单地更改类名：

function changeText(obj) {
    var element = obj.children[0];
    if (element.className.indexOf('glyphicon-plus') > -1) {
        element.className = 'glyphicon glyphicon-minus';
    }
    else {
        element.className = 'glyphicon glyphicon-plus';
    }
 }

并使用它将onclick属性：

onClick="changeText(this)"

【讨论】：

【解决方案2】：

先删除内联JS ....onClick="javascript:changeText(${result.index})"

然后将点击事件侦听器附加到元素，并切换类而不是替换整个图标 span 元素 - 替换元素会删除绑定到元素的任何事件侦听器：

$(function() {
    $('[id^=element]').on('click', function() {
        $('span', this).toggleClass('glyphicon-plus glyphicon-minus');
    });
});

【讨论】：

【解决方案3】：

试试这个..

function changeText(idElement) {        
        var element = document.getElementById('collapse' + idElement);      
        if (element.innerHTML == '<span class="glyphicon glyphicon-plus"></span>')         
            {           
            //element.innerHTML = '<span class="glyphicon glyphicon-minus"></span>';
            }
        else {          
            //element.innerHTML = '<span class="glyphicon glyphicon-plus"></span>';
            }
     }

【讨论】：