Question

我有一个列表，我希望它只在列表有一个类时将值转换为首字母。当列表没有类时，将它重新设置为原始值。

HTML：

xPointer = 0;  
for(i=0;i<[imgArr count];i++)
   {
    UIImageView *imgToZoom= [[UIImageView alloc]init];
    imgToZoom.image = [imgArr objectAtIndex:i];
    imgToZoom.tag = i+100;
    imgToZoom.frame = CGRectMake(xPointer, _imagesScrollView.frame.origin.y-10, self.view.frame.size.width,_imagesScrollView.frame.size.height/2);
    [imgToZoom setUserInteractionEnabled:YES];
    [imgToZoom setMultipleTouchEnabled:YES];

    [_imagesScrollView addSubview:imgToZoom];

    xPointer = xPointer+self.view.frame.size.width;



}

_imagesScrollView.contentSize = CGSizeMake(xPointer, _imagesScrollView.frame.size.height);

脚本：

   <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只会获得第一个ul的值，而不会返回原始列表。

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

上切换回原始值到仅初始值

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

Answer 4

在呈现html之后，将ul的html分配给变量（我的代码中为originalHtml），如果它是活动的，则运行逻辑以缩写文本，如果不使用原始文件：

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

我会亲自调用一个函数，按照@DavidDomain＆amp; amp; @Ori Drori但也许你正在寻找除此之外的东西。

在您的情况下，您需要在添加类激活时进行更改。所以我们将有一个外部函数来跟踪类中的任何变化并进行修改。

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

使用此功能的好处是，如果您在其他任何地方的elemts表单上设置active类，则无需担心调用单独的函数来进行UL更改。

Answer 6

在Javascript中你可以这样做

    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

您可以使用基于CSS的方法

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>

然后

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

当element有class时激活脚本，然后在没有class时重置它

7 个答案: