Un programa jquery absolutamente inútil -- javascript campo con jquery campo con html campo con css camp codereview Relacionados El problema

An utterly pointless jQuery program


5
vote

problema

Español

Este es el primer programa de jQuery que he escrito, y no hace mucho, pero agradecería los comentarios. Simplemente haga clic en los diferentes botones de colores para hacer las cosas.

Codepen

  var $greenElement = $(   '<div style="width:750px;height:25px;    background-color:green;" class="green-bar">    <p>Hello</p>   </div>' );  var $redElement = $(   '<div style="width:750px;height:25px;    background-color:red;" class="red-bar">    <p>Goodbye</p>    </div>' );  /* Main JQuery loop */ $(document).ready(function() {      /* Add a red item and fade to the right value*/   $('.add-item-red').mouseenter(function() {     $(this).fadeTo('fast', 0.4);     $(this).click(function() {       $('.output-start').after($redElement);     });   });      /* Check if the mouse is no longer on red button */   $('.add-item-red').mouseout(function() {     $(this).fadeTo('fast', 1);   });      /* Add a green item and fade to the right amount */   $('.add-item-green').mouseenter(function() {     $(this).fadeTo('fast', 0.4);     $(this).click(function() {       $('.output-start').after($greenElement);     });   });      /* Check if mouse is no longer on green button */   $('.add-item-green').mouseout(function() {   $(this).fadeTo('fast', 1);   });      /* Reset all the items */   $('.reset-items').mouseenter(function() {     $(this).fadeTo('fast', 0.4);     $('.reset-items').click(function() {       $('.green-bar').remove();      $('.red-bar').remove();     });   });      /* Check if mouse is no longer on white button */   $('.reset-items').mouseout(function() {     $(this).fadeTo('fast', 1);   }); });  
  body {   background-color: black; }  .button-bar div{   display: table;   display: table-cell; }  .add-item-red {   width: 50px;   height: 50px;   background-color: red;   border-color: black;   border-style: solid;   border-width: 3.5px; }  .add-item-green {   width: 50px;   height: 50px;   background-color: green;   border-color: black;   border-style: solid;   border-width: 3.5px; }  .reset-items {   width: 50px;   height: 50px;   background-color: white;   border-color: black;   border-style: solid;   border-width: 3.5px; }  .output-start {   width: 50px;   height: 15px; }  
  <html>   <head>     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>   </head>   <body>     <div class="button-bar">       <div class="add-item-red">       </div>       <div class="add-item-green">       </div>       <div class="reset-items">       </div>     </div>     <div class="output-start">     </div>   </body> </html>  
Original en ingles

This is the first jQuery program I've written, and it doesn't do much, but I'd appreciate the feedback. Just click on the different colored buttons to do things.

Codepen

var $greenElement = $(   '<div style="width:750px;height:25px; \   background-color:green;" class="green-bar"> \   <p>Hello</p> \  </div>' );  var $redElement = $(   '<div style="width:750px;height:25px; \   background-color:red;" class="red-bar"> \   <p>Goodbye</p> \   </div>' );  /* Main JQuery loop */ $(document).ready(function() {      /* Add a red item and fade to the right value*/   $('.add-item-red').mouseenter(function() {     $(this).fadeTo('fast', 0.4);     $(this).click(function() {       $('.output-start').after($redElement);     });   });      /* Check if the mouse is no longer on red button */   $('.add-item-red').mouseout(function() {     $(this).fadeTo('fast', 1);   });      /* Add a green item and fade to the right amount */   $('.add-item-green').mouseenter(function() {     $(this).fadeTo('fast', 0.4);     $(this).click(function() {       $('.output-start').after($greenElement);     });   });      /* Check if mouse is no longer on green button */   $('.add-item-green').mouseout(function() {   $(this).fadeTo('fast', 1);   });      /* Reset all the items */   $('.reset-items').mouseenter(function() {     $(this).fadeTo('fast', 0.4);     $('.reset-items').click(function() {       $('.green-bar').remove();      $('.red-bar').remove();     });   });      /* Check if mouse is no longer on white button */   $('.reset-items').mouseout(function() {     $(this).fadeTo('fast', 1);   }); });
body {   background-color: black; }  .button-bar div{   display: table;   display: table-cell; }  .add-item-red {   width: 50px;   height: 50px;   background-color: red;   border-color: black;   border-style: solid;   border-width: 3.5px; }  .add-item-green {   width: 50px;   height: 50px;   background-color: green;   border-color: black;   border-style: solid;   border-width: 3.5px; }  .reset-items {   width: 50px;   height: 50px;   background-color: white;   border-color: black;   border-style: solid;   border-width: 3.5px; }  .output-start {   width: 50px;   height: 15px; }
<html>   <head>     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>   </head>   <body>     <div class="button-bar">       <div class="add-item-red">       </div>       <div class="add-item-green">       </div>       <div class="reset-items">       </div>     </div>     <div class="output-start">     </div>   </body> </html>
           
   
   

Lista de respuestas

7
 
vote
vote
La mejor respuesta
 

OK, así que hay dos cosas diferentes aquí:

  1. Efectos de flores (FADE IN / OUT)
  2. acciones

Ahora, el # 1 es el mismo para los tres elementos, y por lo tanto, no debe repetirse en el código. Pero el # 2 es expresamente diferente para cada botón, lo que significa que probablemente no debe mezclarse con los efectos de flotación.

Aparte: Hablando de duplicación, su CSS está llena de ella también. Deberías mirar en eso. También debe evitar nombrar cosas por cómo se ven. P.ej. if not list1: print("list is empty") elif ... 9 está bien hasta que ese elemento ya no sea rojo; Por lo general, tendrá un propósito distinto de ser rojo. Su color es un detalle de presentación. Nombre de lo que hace , no cómo se ve .

.

De todos modos, en estos días (lee: navegadores modernos), probablemente solo usaría transiciones CSS para manejar el efecto de flotación; No es necesario javascript. Por ejemplo:

  Exception0  
  Exception1  

Pero como se trata de jQuery, aquí es como lo manejaría con un nombre de clase común para todos los botones (que, por cierto, usaría 99887776655443342 Etiquetas para), y JQuery es apropiadamente llamado 99887766555443343 manejador de eventos .

  Exception44  
  99887766555443345  
  Exception6  

Ahora, está usando Exception7 combinado con Exception8 . Pero eso no es realmente "simétrico". El opuesto de Exception9 es prints0 (y lo contrario de prints1 prints2 ). Los eventos de entrada / licencia son originarios de los eventos de Internet solo para Internet que Jquery se ha replicado, y se comportan de manera diferente a los eventos de sobrecarga / salida estándar con respecto a los elementos anidados. Los documentos de Jquery tienen una discusión sobre esto y una demostración para ilustrar . Sucede que funciona en su caso, pero es un poco como decir que lo opuesto a la multiplicación está restando; Solo sucede que funcione para ciertos números, pero eso no lo hace bien.

A continuación, hay las acciones de clic. Usted está agregando los que están dentro del evento prints3 . Este es un gran no-no. ¡Significa que cada vez que usas el mouse sobre un botón, se agrega un nuevo handler de eventos de clic! No lo notas porque estás insertando y reinserción del mismo elemento. Pero si el mouse sobre el botón rojo 3 veces antes de hacer clic en él, el efecto es que está haciendo clic en él 3 veces porque ahora tiene 3 manejadores de eventos separados pero idénticos.

Otra razón para mantener las acciones separadas de los efectos de flotación.

Puede conectar los manipuladores de eventos a un elemento por su ID (como se muestra a continuación), o puede usar algunos otros medios de vincular un elemento a una acción .

  prints4  
  prints5  
  prints6  

Notarás algunas cosas aquí:

  1. Soy Preparando Los elementos al prints7 DIV, en lugar de insertarlos junto a él. Esto tiene más sentido para mí desde ahora, toda la salida es, bueno, en la salida. No al lado de ello Y significa que puedo llamar prints8 para limpiar.

  2. Estoy construyendo los elementos que usan jQuery en lugar de con cadenas de HTML. Generalmente no me gusta una tonelada de HTML de codificación dura en mi JS. Tampoco necesito identificaciones para ellos, porque, nuevamente, solo debo llamar prints9 .

podría ir más allá y agregar los elementos en el propio HTML, y simplemente ocultarlos hasta que NE Ded, que sería aún más sencillo de muchas maneras, y mantener el JS libre de elementos de codificación dura de cualquier tipo.

Al final, probablemente replicaría su código con algo como esto:

  99887766555443360  
  if not list1:     raise ValueError("list is empty") 1  
  if not list1:     raise ValueError("list is empty") 2  

No hace que los párrafos cambien de lugar, pero tampoco creo que esa sea la característica más destacada, para ser honesta.

 

Ok, so there's two different things here:

  1. Hover effects (fade in/out)
  2. Actions

Now, #1 is the same for all three elements, and thus shouldn't need to be repeated in code. But #2 is expressly different for each button, which means it probably shouldn't mixed with the hover effects.

Aside: Speaking of duplication, your CSS is full of it too. You should look into that. You should also avoid naming things for how they look. E.g. add-item-red is fine until that item is no longer red; usually it'll have some purpose other than being red. Its color is a presentation detail. Name stuff for what it does, not how it looks.

Anyway, these days (read: modern browsers), I'd probably just use CSS transitions to handle the hover effect; no javascript necessary. For instance:

div {   background: green;   padding: 0.3em;   display: inline-block;   transition-duration: 0.5s; }  div:hover {   opacity: 0.4; }
<div>Hover</div>

But since this is about jQuery, here's how I'd handle it with a common class name for all the buttons (which, incidentally, I'd use <button> tags for), and jQuery's appropriately named .hover() event handler.

$(".fade").hover(function () {   $(this).fadeTo('fast', 0.4); }, function () {   $(this).fadeTo('fast', 1.0); });
body { background: black; }  button {   border: none;   padding: 1em; }  #helloButton   { background: green; } #goodbyeButton { background: red; } #clearButton   { background: white; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <button type="button" id="helloButton" class="fade">One</button> <button type="button" id="goodbyeButton" class="fade">Two</button> <button type="button" id="clearButton" class="fade">Three</button>

Now, you're using mouseenter combined with mouseout. But that's not really "symmetrical". The opposite of mouseenter is mouseleave (and the opposite of mouseout is mouseover). The enter/leave events are originally Internet Explorer-only events which jQuery has replicated, and they behave differently than the standard over/out events with regard to nested elements. jQuery's docs have a discussion of this and a demo to illustrate. It happens to work in your case, but it's a bit like saying that the opposite of multiplying is subtracting; it just happens to work out for certain numbers, but that doesn't make it right.

Next, there's the click actions. You're adding those inside the mouseenter event. This is a big no-no. It means that every time you mouse over a button, a new click event handler gets added! You just don't notice it because you're inserting and re-inserting the same element. But if you mouse over the red button 3 times before clicking it, the effect is that you're clicking it 3 times because now you've got 3 separate but identical event handlers attached.

Yet another reason to keep the actions separate from the hover effects.

You can either attach the event handlers to an element by its ID (as below), or you can use some other means of linking an element to an action.

$(".fade").hover(function () {   $(this).fadeTo('fast', 0.4); }, function () {   $(this).fadeTo('fast', 1.0); });  var hello = $("<p></p>").text("Hello").css({background: "green"}); var goodbye = $("<p></p>").text("Goodbye").css({background: "red"});  $("#helloButton").on("click", function () {   $("#output").prepend(hello); });  $("#goodbyeButton").on("click", function () {   $("#output").prepend(goodbye); });  $("#clearButton").on("click", function () {   $("#output").empty(); });
body { background: black; }  button {   border: none;   padding: 1em; }  #helloButton   { background: green; } #goodbyeButton { background: red; } #clearButton   { background: white; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <button type="button" id="helloButton" class="fade">One</button> <button type="button" id="goodbyeButton" class="fade">Two</button> <button type="button" id="clearButton" class="fade">Three</button>  <div id="output"></div>

You'll notice a few things here:

  1. I'm prepending the elements to the output div, rather than inserting them next to it. This makes more sense to me since now, all the output is, well, in the output. Not beside it. And it means I can just call empty to clean up.

  2. I'm constructing the elements using jQuery rather than with strings of HTML. I generally don't like a ton of hardcoded HTML in my JS. I also don't need IDs for them, because, again, I just need to call empty.

I might go a step further and add the elements in the HTML itself, and simply hide them until needed, which would be even simpler in a lot of ways, and keep the JS free of hardcoded elements of any kind.

In the end, I'd probably replicate your code with something like this:

$("#helloButton").on("click", function () {   $("#hello").show(); });  $("#goodbyeButton").on("click", function () {   $("#goodbye").show(); });  $("#clearButton").on("click", function () {   $("#output").children().hide(); });
body { background: black; }  button {   border: none;   padding: 1em;   display: inline-block; }  .fade { transition-duration: 0.5s; } .fade:hover { opacity: 0.4; }  #helloButton   { background: green; } #goodbyeButton { background: red; } #clearButton   { background: white; }  #hello { background: green; } #goodbye { background: red; }  #output p { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button type="button" id="helloButton" class="fade">One</button> <button type="button" id="goodbyeButton" class="fade">Two</button> <button type="button" id="clearButton" class="fade">Three</button>  <div id="output">   <p id="hello">Hello</p>   <p id="goodbye">Goodbye</p> </div>

It doesn't make the paragraphs switch places, but I don't think that's the most salient feature either, to be honest.

 
 
   
   

Relacionados problema

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

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

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

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

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

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

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

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

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




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