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

那应该有用。 Take a lookat this jsFiddle which is a very simple version of what you're trying to do。是否有任何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>

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

3 个答案: