Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Priscila Neu

Como fazer condição para mais de uma classe igual

Recommended Posts

Oi, 

 

Estou batendo cabeça com algo que deva ser simples, mas eu não sei.. rsrs...

 

Estou transformando chamadas de ícones em svgs inline através de javascript, está funcionando, mas o porém é que tenho mais de uma classe junto que determina tamanho do ícones e eu desejaria manter essa classe.

 

Tenho o seguinte código, ele está funcionando, porém executa uma vez só e não sei como fazer a partir de agora.

 

HTML antes do script:



	<i class="ico-activity ico-md"></i>

      <i class="ico-folder ico-lg"></i>

      <i class="ico-zap ico-md"></i>
      
      <i class="ico-add-version ico-lg"></i>

      <i class="ico-folder-mac ico-lg"></i>

HTML após script:

 

<svg class="ico-md"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="sprite/sprite.svg#activity"></use></svg>

<svg class="ico-md"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="sprite/sprite.svg#folder"></use></svg>

<svg class="ico-md"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="sprite/sprite.svg#zap"></use></svg>
      
<svg class="ico-md"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="sprite/sprite.svg#add-version"></use></svg>

<svg class="ico-md"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="sprite/sprite.svg#folder-mac"></use></svg>      
      

 

Código Javascript atual:

function iconesSgv(){
    var elements = document.querySelectorAll("i[class*=ico-]");
    
    elements.forEach(element => {
        var icoMd = document.querySelector(".ico-md");    
        var icoLg = document.querySelector(".ico-lg");

        var icons = element.getAttribute('class').replace('ico-', '').split(' ')[0];
        var div = document.createElement('div');
        
            if(icoMd){
                div.innerHTML = '<svg class="ico-md"><use xlink:href="sprite/sprite.svg#'+ icons +'" /></svg>';        
                element.replaceWith(div.firstChild);

            }else if(icoLg){
                div.innerHTML = '<svg class="ico-lg"><use xlink:href="sprite/sprite.svg#'+ icons +'" /></svg>';                                                
                element.replaceWith(div.firstChild);

            }

        });
    };
iconesSgv();

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

tentou:
 

div.innerHTML = '<svg class="' + element.getAttribute('class') + '"><use xlink:href="sprite/sprite.svg#'+ icons +'" /></svg>';     

ai não faz nem sentido você separar icoMd e icoLg.

Compartilhar este post


Link para o post
Compartilhar em outros sites
3 horas atrás, William Bruno disse:

tentou:
 


div.innerHTML = '<svg class="' + element.getAttribute('class') + '"><use xlink:href="sprite/sprite.svg#'+ icons +'" /></svg>';     

ai não faz nem sentido você separar icoMd e icoLg.

 

Oi William,

 

Muito obrigada, sim, ajudou bastante e funcionou, mas tem um porém, a ordem é manter a classe que determina o seu tamanho :( .. no caso tenho essas:

.ico-sm, .ico-md, .ico-lg, .ico-xl, .ico-90p

Pensei em filtrar na busca só o que estivesse depois do primeiro espaço, mas se acontecer de em algum lugar, elas terem sido chamadas ao inverso, ferrou.. rsrs... E como se trata de um sistema já existente e com mais desenvolvedores trabalhando, não teria como controlar essa ordem. Por isso que pensei inicialmente, em buscar pelo nome exato da classe e guardar em uma variável. Desculpa não ter explicado em detalhes antes.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Oi Priscila, o que pensei foi algo assim:


 

<i class="ico-activity ico-md"></i>
<i class="ico-folder ico-lg"></i>
<i class="ico-zap ico-md"></i>
<i class="ico-add-version ico-lg"></i>
<i class="ico-folder-mac ico-lg"></i>

<script>
var SIZE_CLASSES = ['ico-sm', 'ico-md', 'ico-lg', 'ico-xl', 'ico-90p'];
function removeSizeClasses(className) {
  return className.split(' ').filter(item => {
    return SIZE_CLASSES.indexOf(item) === -1
  }).join(' ');
}
function iconesSgv(){
  var elements = document.querySelectorAll("i[class*=ico-]");
  elements.forEach(element => {
    var className = element.getAttribute('class');
    var icons = removeSizeClasses(className);
    console.log('icons', icons);
    var div = document.createElement('div');
    div.innerHTML = '<svg class="' + className + '"><use xlink:href="sprite/sprite.svg#'+ icons +'" /></svg>';
    element.replaceWith(div.firstChild);
  });
};
iconesSgv();
</script>

Veja que usei uma função para remover as classes de tamanho dinamicamente, ai não importa mais a ordem em que foram declaradas.

 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Oi... Bom dia!!!

 

Deu certo, muitoo obrigada mesmo!!!

 

Estou finalizando esse script e me deparei com outra situação?

Se eu precisasse percorrer e guardar em uma variável parte da chamada de uma classes, no caso parte de uma url, eu consigo?

 

Por exemplo, hoje eu chamo o ícone pelo nome da classe, mas observei que em alguns casos a classe é um nome e o ícone chamado para ela tem nome diferente de arquivo:

 

.ico-check {background-image:url(../icon/feather/check-circle.svg);}
.ico-check-in {background-image:url(../icon/feather/check.svg);}

 

Seria possível pegar somente o check-circle.svg dessa classe para aplicar posteriormente no js?

Como jogar na variável chamada em 'icons', conforme segue abaixo:

div.innerHTML = '<svg class="' + currentClass + '"><use xlink:href="assets/icon/sprite/sprite.svg#'+ icons +'" /></svg>';

 

Em 19/04/2018 at 19:22, William Bruno disse:

tentou:
 


div.innerHTML = '<svg class="' + element.getAttribute('class') + '"><use xlink:href="sprite/sprite.svg#'+ icons +'" /></svg>';     

ai não faz nem sentido você separar icoMd e icoLg.

 

Oi William,

 

Muito obrigada, sim, ajudou bastante e funcionou, mas tem um porém, a ordem é manter a classe que determina o seu tamanho :( .. no caso tenho essas:

.ico-sm, .ico-md, .ico-lg, .ico-xl, .ico-90p

Pensei em filtrar na busca só o que estivesse depois do primeiro espaço, mas se acontecer de em algum lugar, elas terem sido chamadas ao inverso, ferrou.. rsrs... E como se trata de um sistema já existente e com mais desenvolvedores trabalhando, não teria como controlar essa ordem. Por isso que pensei inicialmente, em buscar pelo nome exato da classe e guardar em uma variável. Desculpa não ter explicado em detalhes antes.

Compartilhar este post


Link para o post
Compartilhar em outros sites

complicadinho ler atributo de classe css.. ficou assim:

veja que no html gerado final, eu estou sim mantendo a classe de tamanho...


 

<style>
.ico-check {background-image:url(../icon/feather/check-circle.svg);}
.ico-check-in {background-image:url(../icon/feather/check.svg);}
</style>

<i class="ico-check ico-md"></i>
<i class="ico-check-in ico-lg"></i>
<script>
var SIZE_CLASSES = ['ico-sm', 'ico-md', 'ico-lg', 'ico-xl', 'ico-90p'];
function removeSizeClasses(className) {
  return className.split(' ').filter(item => {
    return SIZE_CLASSES.indexOf(item) === -1
  }).join(' ');
}
function iconesSgv(){
  var elements = document.querySelectorAll("i[class*=ico-]");
  elements.forEach(element => {
    var className = element.getAttribute('class');
    var icons = removeSizeClasses(className);
    var styleClass = findByClassName(icons.replace('icons '))
    var file = styleClass.style.backgroundImage.match(/([^\/]+\.svg)/)[0]
    console.log('file', file);
    var div = document.createElement('div');
    div.innerHTML = '<svg class="' + className + '"><use xlink:href="sprite/sprite.svg#'+ file +'" /></svg>';
    element.replaceWith(div.firstChild);
  });
};
function findByClassName(className) {
  var sheets = Array.from(document.styleSheets)
  var styleClass;
  sheets.forEach((sheet) => {
    var rules = Array.from(sheet.rules);
    styleClass = rules.find((rule) => {
      return rule.selectorText === `.${className}`
    })
  })
  return styleClass;
}
iconesSgv();
</script>

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por Luccas Gaulia
      ola Pessol,
       
      Existe esse código abaixo? ou eu criei errado...
      var imported = document.createElement('css'); imported.src = 'css/demo.css'; document.head.appendChild(imported);  
      Preciso de um código que importe o CSS para abrir um certo modal que está no JS
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.