innerHTML的问题

Question

我的折叠表中包含折叠其内容的链接。我想使用JS更改链接（例如，从＆＃34; +＆＃34;到＆＃34; - ＆＃34;和向后）。我做到了，但我的桌子停止了折叠。这是代码：

<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部分，表格会崩溃，但图标不会发生变化。如果我删除了评论，图标更改，但表格不会崩溃。我怎么能避免这件事？

Answer 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)"

Answer 2

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

然后将click事件侦听器附加到该元素，并切换类而不是替换整个图标span元素 - 替换该元素将删除绑定到该元素的所有事件侦听器：

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

Answer 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>';
            }
     }