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

Question

I have a list i want it to convert the value to there initials only when the list have a class. reset it again to there original value when the list have no class.

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>

SCRIPT:

  $(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();
      });

   });

OUTPUT WITH CLASS:

<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>

After that the ul will only get the value of the first ul not getting back to the original lists.

<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>

I should be able to toggle back to the original value to the Initial only values just exactly on the HTML

Answer 1

Just save the initial values of the list elements using jQuery's data() method.

jQuery.data()

Store arbitrary data associated with the specified element and/or return the value that was set.

 $(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> 

-- Edit --

Example with nested unordered list elements.

 $(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

I hope this will help

 $(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

You should better put the old values in a data-attribute and get them from there the second time.

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("");
  });
}

And the second time:

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

Answer 4

After the html is rendered, assign the ul's html to a variable ( originalHtml in my code), if it's active run the logic to abbreviate the text, if not use the original:

 $(function () { var $ul = $('ul'); var originalHtml = $('ul').html(); function toggleData() { if($ul.hasClass('active')) { $ul.find("li").html(function (i, v) { return v.trim().split(" ").map(function (obj) { return obj.substr(0, 1); }).join(""); }); return; } $ul.html(originalHtml); } $('button').on('click', function() { $ul.toggleClass('active'); toggleData(); }); }); 

 <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> 

Answer 5

I would personally call a function to do the changing of text on button click as suggested by @DavidDomain & @Ori Drori but maybe you are looking for something other than that.

In your case you need the changes when the class active is added. So we will have an external function which will track any change in the class and make the modifications.

 /* TOGGLE FOR ADDINGG CLASS */ $(function(){ $('ul li').each(function(){ $(this).data('name',$(this).html()); }); $("#btn").click(function(){ $("ul li").toggleClass("active"); }); }); var rex = /(<([^>]+)>)/ig; var actualtext = ''; var t = setInterval(function () { $("ul li").each(function(){ if($(this).hasClass('active')){ if($(this).data('name') == $(this).html()){ $(this).html(function (i, v) { actualtext = v.replace(rex,"").trim() intials = actualtext.split(" ").map(function (obj) { return obj.substr(0, 1); }).join(""); return v.replace(actualtext,intials) }); } }else{ $(this).html($(this).data('name')); } }); },100); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <ul> <li><a href='#'>Alpha Beta</a></li> <li>Beta</li> <li>Charlie</li> </ul> <button id="btn">click</btn> 

the benifit of using this is that if you set active class on the elemts form anywhere else, you don ot need to worry about calling a seperate function to make the UL changes.

Answer 6

In Javascript you can do like this

    function toggle() {
        var a = document.querySelector('ul');
        if (!a.classList.contains('active')) {
            for (var i = 0; i < a.children.length; i++) {
                var s = a.children[i].innerHTML.split(' '),
                    c;
                c = s.map(function(item) {
                    return item.substr(0, 1);
                });
                a.children[i].innerHTML = c.join("");
            }
            a.classList.add('active');
        } else {
            for (var i = 0; i < a.children.length; i++) {
                a.children[i].innerHTML = a.children[i]['dataset']['val'];
            }
            a.classList.remove('active');
        }
    } 

<ul>
  <li data-val = "Alpha Beta">Alpha Beta</li> 
  <li data-val = "Beta">Beta</li> 
  <li data-val = "Charlie">Charlie</li> 
</ul> 
<button onclick = "toggle()">Toggle</button>

Answer 7

you can use a css based approach

li{
    display: none;
}

li.active{
    display: block!important;
}

<ul>
  <li class="">Alpha Beta</li><li class="active">AB</li>
  <li class="">Beta</li><li class="active">B</li>
  <li class="">Charlie</li><li class="active">C</li>
</ul>

<a href="#" id="btn" ">Sample</a>

and then

$(function(){
    $("#btn").click(function(){
     $("ul li").toggleClass("active");
    });
});