innerHTML 的问题

Question

我有一个折叠的 table，link 折叠了它的内容。我想使用 JS 更改 link（例如，从“+”到“-”和向后）。我做到了，但我的 table 停止崩溃了。这是代码：

<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 部分，table 会折叠，但图标不会改变。如果我删除评论，图标会改变，但 table 不会折叠。我怎样才能避免这种情况？

Answer 1

试试这个..

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

Answer 2

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

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 3

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

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

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

innerHTML 的问题

Problems with innerHTML

html

javascript

jquery

jstl

twitter-bootstrap