添加/删除类在 IE 中不起作用

Question

.toggle(
  function() { 
      hiddenElements.show();
      $(this).text('Collapse');
      $(".accToggler").removeClass().addClass("accToggler2");
  }, 
  function() { 
      hiddenElements.hide();
      $(this).text(showCaption);
      $(".accToggler2").removeClass().addClass("accToggler");
  }
)

单击原始 .accToggler 按钮后，切换功能似乎不起作用。类不会被添加/删除到按钮。

我把它改成这样：

                      .toggle(
                          function() { 
                              hiddenElements.show();
                              $(this).text('Collapse');
                              $("#accTogg").removeClass("accToggler").addClass("accToggler2");
                          }, 
                          function() { 
                              hiddenElements.hide();
                              $(this).text(showCaption);
                              $("#accTogg").removeClass("accToggler2").addClass("accToggler");
                          }
                      )

仍然没有..现在肯定可以工作了，对吧？

              $('.v65-productDisplay').append(
                  $('<tr><td><div class="accToggler" style="font-weight:bold;" id="accTogg">' + showCaption + '</div></td></tr>')
                      .toggle(
                          function() { 
                              hiddenElements.show();
                              $(this).text('Collapse');
                              $("#accTogg").removeClass("accToggler").addClass("accToggler2");
                          }, 
                          function() { 
                              hiddenElements.hide();
                              $(this).text(showCaption);
                              $("#accTogg").removeClass("accToggler2").addClass("accToggler");
                          }
                      )
              );

这就是全部代码，抱歉。

$(this).text('Collapse');

正在替换整个 div，因此它甚至不再存在=/我怎样才能让它只替换 div 内的文本？

Answer 1

那应该有效。 看看这个 jsFiddle，它是您想要做的事情的一个非常简单的版本。是否抛出任何 JavaScript 错误？

Answer 2

/**
    * Method that checks whether cls is present in element object.
    * @param  {Object} ele DOM element which needs to be checked
    * @param  {Object} cls Classname is tested
    * @return {Boolean} True if cls is present, false otherwise.
*/
function hasClass(ele, cls) {
  return ele.getAttribute('class').indexOf(cls) > -1;
}

/**
    * Method that adds a class to given element.
    * @param  {Object} ele DOM element where class needs to be added
    * @param  {Object} cls Classname which is to be added
    * @return {null} nothing is returned.
*/
function addClass(ele, cls) {
   if (ele.classList) {
     ele.classList.add(cls);
   } else if (!hasClass(ele, cls)) {
    ele.setAttribute('class', ele.getAttribute('class') + ' ' + cls);
  }
}

/**
  * Method that does a check to ensure that class is removed from element.
  * @param  {Object} ele DOM element where class needs to be removed
  * @param  {Object} cls Classname which is to be removed
  * @return {null} Null nothing is returned.
*/
function removeClass(ele, cls) {
  if (ele.classList) {
    ele.classList.remove(cls);
  } else if (hasClass(ele, cls)) {
    ele.setAttribute('class', ele.getAttribute('class').replace(cls, ' '));
 }
}

Answer 3

试试这个

$("li").toggle(
  function() { 
      //hiddenElements.show();
      $(this).text("Collapse");
      setTimeout(function () {
        $(".accToggler").removeClass().addClass("accToggler2");
      }, 1);
  }, 
  function() { 
      //hiddenElements.hide();
      $(this).text("NotCollapse");
      setTimeout(function () {
        $(".accToggler2").removeClass().addClass("accToggler");
      }, 1);
  }
)

.accToggler
{
  color:green;
}

.accToggler2
{
  color:red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<ul>
  <li class="accToggler">NotCollapsed</li>
</ul>