当元素有类时激活脚本，然后在没有类时重新设置脚本

Question

我有一个列表，我希望它只在列表有类时才将值转换为那里的首字母。当列表没有类时，再次将其重置为原始值。

HTML：

   <ul class="mm-listview">
    <li><a href="#/"><i class="fa fa-home" title="Home"></i> Home</a>
     <ul>
      <li class="sample"><a href="admin-start-page.html">Admin Delta Charlie</a></li>
      <li><a href="#/">Rima Tango</a></li>
     </ul>
    </li>
    <li><a href="#/"><i class="fa fa-user" title="Charlie Papa"></i> Content Edition</a>
     <ul>
      <li><a href="#/">Tango Romeo Delta</a></li>
      <li><a href="#/">India Uniform Echo</a></li>
      <li><a href="#/">Zulu</a></li>
      <li><a href="#/">Mama Echo</a></li>
     </ul>
    </li>
</ul>

<button class="toggle-class" style="position: absolute;background-color: red;z-index: 9999;margin-top: 200px;">Toggle Class</button>

剧本：

  $(function () {

   function changeUL() {
          if($('.mm-listview .mm-listview').hasClass('active-menu')) {
              $('.mm-listview .mm-listview').data('initial ', $('.mm-listview .mm-listview').html());
              $(".mm-listview .mm-listview li a").html(function (i, v) {
                  return v.trim().split(" ").map(function (obj) {
                      return obj.substr(0, 1);
                  }).join("");
              });
          } else {
              if($('.mm-listview .mm-listview').data('initial ').length > 0) {
                  $('.mm-listview .mm-listview').empty();
                  $('.mm-listview .mm-listview li a').append($('.mm-listview .mm-listview').data('initial '));
              }
          }
      }
      $('button').on('click', function() {
          $('.mm-listview .mm-listview').toggleClass('active-menu');
          changeUL();
      });

   });

类输出：

<ul class="mm-listview">
                <li class="mm-vertical"><a class="mm-next" href="#mm-1" data-target="#mm-1"></a><a href="#/"><i class="fa fa-home" title="Home"></i> Home</a>
                    <div class="mm-panel mm-vertical" id="mm-1"><ul class="mm-listview mm-vertical active-menu">
                        <li class="sample"><a href="admin-start-page.html">ADC</a></li>
                        <li><a href="#/">RT</a></li>
                    </ul></div>
                </li>
                <li class="mm-vertical"><a class="mm-next" href="#mm-2" data-target="#mm-2"></a><a href="#/"><i class="fa fa-user" title="Content Edition"></i> Content Editor</a>
                    <div class="mm-panel mm-vertical" id="mm-2"><ul class="mm-listview mm-vertical active-menu">
                        <li><a href="#/">TRD</a></li>
                        <li><a href="#/">IUE</a></li>
                        <li><a href="#/">Z</a></li>
                        <li><a href="#/">ME</a></li>
                    </ul></div>
                </li>
</UL>

在此之后，ul将只得到第一个ul的值，而不是返回到原始列表。

<ul class="mm-listview">
    <li><a href="#/"><i class="fa fa-home" title="Home"></i> Home</a>
     <ul>
      <li class="sample"><a href="admin-start-page.html">Admin Delta Charlie</a></li>
      <li><a href="#/">Rima Tango</a></li>
     </ul>
    </li>
    <li><a href="#/"><i class="fa fa-user" title="Charlie Papa"></i> Content Edition</a>
     <ul>
      <li><a href="#/">Admin Delta Charlie</a></li>
      <li><a href="#/">Rima Tango</a></li>
     </ul>
    </li>
</ul>

我应该能够切换回原来的值，只在HTML上的初始值。

Answer 1

只需使用jQuery的data()方法保存列表元素的初始值。

jQuery.data()

存储与指定元素关联的任意数据，并/或返回设置的值。

​

$(function () {

    function changeUL() {
        if($('ul').hasClass('active')) {
            $('ul').data('initial', $('ul').html());
            $("li").html(function (i, v) {
                return v.trim().split(" ").map(function (obj) {
                    return obj.substr(0, 1);
                }).join("");
            });
        } else {
            if($('ul').data('initial').length > 0) {
                $('ul').empty();
                $('ul').append($('ul').data('initial'));
            }
        }
    }
    $('button').on('click', function() {
        $('ul').toggleClass('active');
        changeUL();
    });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul>
  <li>Alpha Beta</li>
  <li>Beta</li>
  <li>Charlie</li>
</ul>

<button class="toggle-class">Toggle Class</button>

​

--编辑--

具有嵌套无序列表元素的示例。

​

$(function () {

  function changeUL() {
    if($('ul').hasClass('active')) {
      $('ul').data('initial', $('ul').html());
      $('ul').not('.mm-listview').each(function(){
        $(this).find('a').html(function (i, v) {
          if($(v).parent().children().length < 1) {
            return v.trim().split(" ").map(function (obj) {
              return obj.substr(0, 1);
            }).join("");
          }
        });
      })
    } else {
      if($('ul').data('initial').length > 0) {
        $('ul').empty();
        $('ul').append($('ul').data('initial'));
        $('ul').each(function(){
          $(this).removeClass('active');
        });
      }
    }
  }
  $('button').on('click', function() {
    $('ul').each(function(){
      $(this).toggleClass('active');

    })
    changeUL();
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<ul class="mm-listview">
  <li><a href="#/"><i class="fa fa-home" title="Home"></i> Home</a>
    <ul>
      <li class="sample"><a href="admin-start-page.html">Admin Delta Charlie</a></li>
      <li><a href="#/">Rima Tango</a></li>
    </ul>
  </li>
  <li><a href="#/"><i class="fa fa-user" title="Charlie Papa"></i> Content Edition</a>
    <ul>
      <li><a href="#/">Tango Romeo Delta</a></li>
      <li><a href="#/">India Uniform Echo</a></li>
      <li><a href="#/">Zulu</a></li>
      <li><a href="#/">Mama Echo</a></li>
    </ul>
  </li>
</ul>

<button class="toggle-class">Toggle Class</button>

​

Answer 2

我希望这能帮上忙

​

$(function () {
  $("li").html(function (i, v) {
      $('li:eq('+i+')').attr('before', v.trim());
    return v.trim().split(" ").map(function (obj) {
      return obj.substr(0, 1);
    }).join("");
  });
});

/* TOGGLE FOR ADDINGG CLASS */
   $(function(){
    $("#btn").click(function(){
     $("ul li").toggleClass("active");
        if(!$("ul li:first").hasClass('active')) {
        	$("li").html(function (i, v) {
                  return $('li:eq('+i+')').attr('before');
              });
        } else {
        	$("li").html(function (i, v) {
                return v.trim().split(" ").map(function (obj) {
                    return obj.substr(0, 1);
                }).join("");
              });
        }
    });

   });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<ul>
  <li class="active">Alpha Beta</li>
  <li class="active">Beta</li>
  <li class="active">Charlie</li>
</ul>

<a href="#" id="btn" ">Toggle Active</a>

​

Answer 3

最好将旧值放在data-attribute中，然后第二次从那里获取它们。

function onActive() {
  $("li").html(function (i, v) {
    $(this).data('old_value',v);
    return v.trim().split(" ").map(function (obj) {
      return obj.substr(0, 1);
    }).join("");
  });
}

第二次：

function onInActive() {
  $("li").html(function (i, v) {
    $(this).html($(this).data('old_value'));
  });
};