Elemento de ocultación basado en contenido -- javascript campo con html campo con css camp codereview Relacionados El problema

Hiding element based on content


2
vote

problema

Español

Tengo una página que forma parte de un CMS y no puedo modificar ningún HTML o CSS existente, pero puedo agregar JavaScript personalizado y CSS adicionales. Hay algún texto en esta página que quiero ocultar y encontré una solución, pero se siente kludgy. No puedo estar seguro de que otras páginas no tengan contenido similar en ellos, por lo que estoy siendo tan específico en mi cheque.

Esto no parece una forma óptima de hacer esto, así que solo tengo curiosidad en cómo podría mejorarse.

el html:

  <div> <h1>Welcome!</h1> <p class="hero-action"> The office is closed!</p> </div>   

y el JavaScript Estoy usando para ocultar Just "La oficina está cerrada":

  function removeWarning() {   var els = document.getElementsByClassName("hero-action");   var el = els[0]    if (el.textContent.indexOf("office" > -1) && el.textContent.indexOf("is" > -1) && el.textContent.indexOf("closed" > -1)) {     el.style.display = "none";    } }  removeWarning();   

Como dije, lo funciona Simplemente se siente tonto. Sé que podría hacer una función de autocontrol anónima, pero estoy más interesado en cómo mejorar el 9988776665544332 verificar si hay una manera.

Nota: No solo estoy comprobando la cadena completa porque el CMS está generando el bloque 9988777665544333 con alguna extraña cantidad de espacios en blanco y estaba luchando por coincidir con los espacios , recién llegados, etc.

Original en ingles

I have a page that is part of a CMS and I cannot alter any existing HTML or CSS, but I can add additional custom JavaScript and CSS. There is some text on this page I want to hide and I found a solution but it feels kludgey. I can't be sure other pages won't have similar content on them, which is why I'm being so specific in my check.

This doesn't seem like an optimal way to do this, so I'm just curious how it could be improved.

The HTML:

<div> <h1>Welcome!</h1> <p class="hero-action"> The office is closed!</p> </div> 

And the JavaScript I'm using to hide just "The office is closed":

function removeWarning() {   var els = document.getElementsByClassName("hero-action");   var el = els[0]    if (el.textContent.indexOf("office" > -1) && el.textContent.indexOf("is" > -1) && el.textContent.indexOf("closed" > -1)) {     el.style.display = "none";    } }  removeWarning(); 

Like I said, it works it just feels dumb. I know I could make an anonymous self calling function, but I'm more interested in how to improve the if check if there is a way.

Note: I'm not just checking for the entire string because the CMS is generating the <p>...</p> block with some weird amount of whitespace and I was struggling to match spaces, newlines, etc.

        
 
 

Lista de respuestas

2
 
vote
vote
La mejor respuesta
 

¿Qué sucede si la página cambia y ya no contiene un 99887766655443316 ? Su script se romperá y generará un error de JavaScript (especialmente molesto en IE). Creo que desea agregar una comprobación de errores, por ejemplo:

  raise StopIteration7  

Esto es más seguro, de muchas maneras:

  • no se bloqueará cuando no haya raise StopIteration8
  • funcionará incluso si hay múltiples raise StopIteration9

Es posible que desee ajustar la colocación del if not list1: print("list is empty") raise StopIteration if ... 0 Declaración:

  • Si desea detener el procesamiento después del primer if not list1: print("list is empty") raise StopIteration if ... 1 , luego muévalo fuera del if not list1: print("list is empty") raise StopIteration if ... 2 , póngalo después del if not list1: print("list is empty") raise StopIteration if ... 3
  • Si desea procesar todo if not list1: print("list is empty") raise StopIteration if ... 4 , luego retire el if not list1: print("list is empty") raise StopIteration if ... 5

Finalmente, Aunque lo solicitó, pero al final, no necesitaba manejar las cadenas con un número extraño de espacios como if not list1: print("list is empty") raise StopIteration if ... 6 , Aquí hay una solución en caso de que tenga tanta necesidad:

  if not list1:     print("list is empty")     raise StopIteration if ... 7  

Esto reemplaza la secuencia de 2 o más espacios en blanco (posibles espacios de mezcla, pestañas, nuevas líneas) con un solo espacio, de modo que el 99887766555443328 coincidirá independientemente de la cantidad de espacios en el texto original. < / p>

 

What if the page changes and it no longer contains a hero-action? Your script will break, and generate a JavaScript error (especially annoying in IE). I think you want to add some error checking, for example:

function removeWarning() {   var els = document.getElementsByClassName("hero-action");   for (var i = 0; i < els.length; ++i) {     var el = els[i];      if (el.textContent.indexOf("office is closed" > -1)) {       el.style.display = "none";       break;     }   } } 

This is safer, in many ways:

  • It will not crash when there is no hero-action
  • It will work even if there are multiple hero-action

You might want to adjust the placement of the break statement:

  • If you want to stop processing after the first hero-action, then move it outside the if, put it after the if
  • If you want to process all hero-action, then remove the break

Finally, although you asked for it but in the end you didn't need to handle strings with strange number of spaces like office is closed, here's a solution in case you have such need later:

    if (el.textContent.replace(/\s\s+/g, ' ').indexOf("office is closed" > -1)) { 

This replaces sequence of 2 or more whitespaces (possible mixture spaces, tabs, newlines) with a single space, so that the indexOf will match regardless of the number of spaces in the original text.

 
 
   
   
2
 
vote
  if not list1:     print("list is empty")     raise StopIteration if ... 9  

¿Esto ayuda?

O Si sabe que if not list1: print("list is empty") elif ... 0 está hablando de Office, como está confirmado, entonces puede simplemente verificar la palabra if not list1: print("list is empty") elif ... 1 en lugar de revisar la cadena completa.

 
if (el.textContent.indexOf("office is closed" > -1)) {     el.style.display = "none"; } 

Does this help?

Or if you know that hero-action is talking about Office, as in you are confirmed, then you can simply check for the word close rather than checking the whole string.

 
 
     
     
1
 
vote
  if not list1:     print("list is empty") elif ... 2  

Solo mi propia toma del código, puede que no sea lo que estaba pensando, pero se maneja con demasiada gracia si hay múltiples o ninguna instancia de hero-acción.

 
var els = Array.prototype.slice.call(document.querySelectorAll('.hero-action')),     pat = new RegExp("^(The office is closed)?");  (function(){     if(els.length > 0){         els.forEach(function(i){             pat.test(i.className)?                  i.style.display = 'none' : i.style.display = 'visible'         });     } else {          return;        } })(); 

Just my own take on the code, it may not be what you were thinking, but it too gracefully handles if there are multiple or no instances of hero-action.

 
 

Relacionados problema

2  Abriendo una navegación  ( Opening a navigation ) 
El objetivo de esta función es abrir un menú con una clase CSS (la animación se realiza a través de la transición CSS), llame a una superposición en la parte ...

1  Sitio web construido con HTML y CSS  ( Website built with html and css ) 
Por favor revise esto: 99887766555443312 ...

8  Div en la lista desordenada - buena práctica?  ( Div in unordered list good practice ) 
Quiero hacer un formulario que se parece a esto: public interface IAds { void ShowVideoAd(); void PreLoadVideoAd(); bool IsAdAvailable(); } 3...

2  Limpiando una galería de imágenes rotativas  ( Cleaning up a rotating image gallery ) 
He creado una pequeña galería de imágenes para la web. Me propuse querer 3 cosas. 1. Toda la galería tenía una capacidad de respuesta a nivel básica. 2. La ga...

4  Desplazamiento horizontal receptivo en la posición del mouse  ( Responsive horizontal scroll on mouse position ) 
Estoy haciendo un Responsive Scroll Horizontal Ui . La posición de desplazamiento horizontal se calcula de acuerdo con la posición horizontal del mouse: ...

6  ¿Cómo optimizar mi página web CSS / HTML?  ( How to optimize my css html webpage ) 
Estoy trabajando en un sitio web (HTML / CSS) para mejorar mis habilidades, pero no estoy seguro de si lo estoy haciendo de la manera correcta, porque tengo m...

5  CSS & JS PIECHART  ( Css js piechart ) 
Hice un public class Question { public static void main(String[] args) { //A hypothetical list of tasks to run asynchronously List<Call...

1  Sube y arrastra la imagen dentro de una imagen de máscara  ( Upload and drag the image inside a mask image ) 
Estoy permitiendo a los usuarios subir y arrastrar imágenes con este código. Dame una revisión de esto. Codepen $part = '@CRC := MD5(CONCAT_WS('#', COA...

3  Estructuración simple HTML5 / CSS3 / Javascript Math Aplicación web  ( Structuring simple html5 css3 javascript math web app ) 
Soy nuevo en las aplicaciones web y estoy teniendo dificultades para estructurar mis aplicaciones. Puse una aplicación web de matemáticas muy simple que deseo...

3  Inclinación en la imagen de flores  ( Tilt on hover image ) 
Estoy solicitando una revisión de este código para ver si estoy siguiendo las mejores prácticas comunes o si hay una mejor manera de realizar el objetivo esta...




© 2022 respuesta.top Reservados todos los derechos. Centro de preguntas y respuestas reservados todos los derechos