Tengo una función similar en mi sitio. La actualización del nuevo número demora de 1 a 3 segundos (debido a las inevitables consultas sql para mi sitio; no es la mejor, pero funciona).

Por ejemplo, si a alguien le gusta, entonces hacen clic en el pulgar hacia arriba. El div allí se actualiza con el nuevo número.

Si tiene 3 me gusta, entonces cuando lo desee, tendrá 4 me gusta. Si vuelves a hacer clic, vuelve a tener 3 Me gusta. Repite eternamente.

El único propósito del javascript es dar una gratificación instantánea a los usuarios que, si no prestan atención, pueden no estar seguros de si funcionó, especialmente en momentos en que demora más de 1 segundo.

Mi idea es que si simplemente puedo hacerlo con jquery para mostrar temporalmente el nuevo número hasta que mi sitio reescriba el div para mostrar el número actualizado, cumplirá esta función para lo que necesito bastante bien.

Aquí está mi idea. Por favor, ayúdame a que funcione.

var likenum = $(".likenum").val(); // get the number inside the div
var newLikeNum = parseInt(likenum) + 1; // make sure the text is an integer for math functions, then do math and assign to a var
$(".likenum").val(newLikeNum); // refresh div with the new number

Hay un par de problemas

  1. ¿Cómo ejecuto UNA VEZ, y si hago clic nuevamente, en cambio, MENOS?
    (además, algunos otros problemas:
    Necesita mantener el likenum original para todas las funciones futuras, en lugar de obtener uno nuevo. De esta manera, si mi sitio actualiza el div, jquery no le está prestando atención. Conocía el número original y ahora es +1 o -1 al número original.

Así que tomemos este ejemplo para lo que quiero.

<div class="likediv">3</div> <!-- original div on page load -->

X *** click *** x (imagina que hice clic con el pulgar hacia arriba)

<div class="likediv">4</div> <!-- updated number -->

X *** click *** x (imagina que hice clic en el pulgar nuevamente)

<div class="likediv">3</div> <!-- updated number -->

X *** click *** x (imagina que hice clic en el pulgar nuevamente)

<div class="likediv">4</div> <!-- updated number -->

X *** click *** x (imagina que hice clic en el pulgar nuevamente)

<div class="likediv">3</div> <!-- updated number -->

X *** click *** x (imagina que hice clic en el pulgar nuevamente)

<div class="likediv">4</div> <!-- updated number -->

Creo que entiendes el punto.

Entonces, ¿cómo puedo hacer esto? Vea mi código de inicio arriba, creo que estoy cerca.

Oh sí, una cosa más. Hay muchos botones de me gusta en la página, no solo uno. entonces necesitaría almacenar y recordar cualquier divs. Porque nos gustan los comentarios y hay muchos por página.

Para esto, solo necesitas usar jquery por favor.


EDITAR: ACTUALIZACIÓN:

Entonces, no estaba funcionando, la respuesta de @ VIDesign, pero veo por qué. De hecho, así es como se ve realmente el HTML. (Tenga en cuenta que también incluyo el nuevo trabajo data-value como parte de la respuesta de @ VIDesign)

<div class="likediv">
    <span class="dynamic-span" data-value="3">3</span>
</div>

Ok, aparentemente, por qué no funcionó es porque cuando haces clic, en realidad haces clic en .likediv, pero el data-value="3" tiene que ir dentro del intervalo que está anidado dentro del div y no se puede tocar .

Entonces, ¿cómo disparamos la respuesta de @ VIDesign, excepto que la acción se dispara cuando se desliza sobre el div fuera del intervalo, cuando span es lo que contiene el número y data-value?

Espero que esto haya quedado claro. Perdón por no especificar esto originalmente, no lo sabía hasta ahora.

Entonces, necesitamos cambiar este código a continuación para trabajar con el anterior:

$(".likediv").click(function(){

    // Use the data-value as the constant to calculate with
    const actualValue = $(this).data("value");
    // Set a max value
    const maxValue = actualValue + 1;
    // Get the value the user sees
    const userValue = parseInt($(this).html());

    // create an empty variable for the new value to display
    let newValue;

    // If the value the user sees is equal to the max value
    if(userValue == maxValue){
        // then subtract one
        newValue = maxValue - 1;
    }else{
        // else add one
        newValue = actualValue + 1;
    }
    // Display the new value to the user
    $(this).html(newValue); 

});

Actualización 2: probé esto pero no funcionó:

$(".likediv").click(function(){

    // Use the data-value as the constant to calculate with
    const actualValue = $(".dynamic-span").data("value");
    // Set a max value
    const maxValue = actualValue + 1;
    // Get the value the user sees
    const userValue = parseInt($(".dynamic-span").html());

    // create an empty variable for the new value to display
    let newValue;

    // If the value the user sees is equal to the max value
    if(userValue == maxValue){
        // then subtract one
        newValue = maxValue - 1;
    }else{
        // else add one
        newValue = actualValue + 1;
    }
    // Display the new value to the user
    $(".dynamic-span").html(newValue); 

});

Nota: El único problema que tengo es la velocidad a la que se muestra al usuario en la parte delantera después de hacer clic .

no estoy tratando de guardar en la base de datos y no quiero intentar obtener algún valor de la base de datos, lo que sería redundante (porque ya sucede con éxito en otro código en el php en el back-end).

Este es solo un truco rápido para actualizar la velocidad a la que el número que se muestra es visible . Tenga en cuenta que cuando el código php en el back-end actualiza el div (1 a 3 segundos por lo general), anulará cualquier cosa que sea en ese div actualmente.

Además, todo lo que se haga aquí debería perderse en la recarga de la página por diseño. Es solo un truco de pantalla frontal, no una actualización real de ningún código en la parte posterior.

-3
hblrvce 8 sep. 2018 a las 01:21

3 respuestas

La mejor respuesta

Fiddle https://jsfiddle.net/videsignz/n3e5u7bt/34/ Aquí hay un ejemplo del uso del atributo de datos. El data-value se cargará desde la base de datos y terminaría con esto para comenzar.

<div class="likediv">
    <span class="dynamic-span" data-value="3">3</span>
</div>
<div class="likediv">
    <span class="dynamic-span" data-value="3">3</span>
</div>
<div class="likediv">
    <span class="dynamic-span" data-value="3">3</span>
</div>
<div class="likediv">
    <span class="dynamic-span" data-value="3">3</span>
</div>
<div class="likediv">
    <span class="dynamic-span" data-value="3">3</span>
</div>
<div class="likediv">
    <span class="dynamic-span" data-value="3">3</span>
</div>

Luego maneje las restricciones dentro de la función de clic del botón / div así ...

$(".likediv").on("click", function(){

    const span = $(this).find("span.dynamic-span");
    // Use the data-value as the constant to calculate with
    const actualValue = span.data("value");
    // Set a max value
    const maxValue = actualValue + 1;
    // Get the value the user sees
    const userValue = parseInt(span.html());

    // create an empty variable for the new value to display
    let newValue;

    // If the value the user sees is equal to the max value
    if(userValue == maxValue){
        // then subtract one
        newValue = maxValue - 1;
    }else{
        // else add one
        newValue = actualValue + 1;
    }
    // Display the new value to the user
    span.html(newValue);    

});
1
VIDesignz 8 sep. 2018 a las 00:39

En el camino hacia la libertad, viviendo libre de jQuery, se encuentra esta respuesta.

document.querySelectorAll('.likes').forEach(el =>
    el.addEventListener('click', function(){
        let span = this.querySelector('span'),
        now = parseInt(span.innerHTML)

        span.innerHTML = this.dataset.value == now ? ++now : --now
    })
)
<div data-value="3" class="likes">
    <span>3</span>
</div>
0
rmn 8 sep. 2018 a las 00:41

Mi respuesta sería crear una variable global dec en el ámbito que indique si aumenta o disminuye

var dec = false;
$("#myButton").click(function(){
  dec = !dec;
});
if(!dec)
 $(".likenum").val(parseInt($(".likenum").val()) + 1);
else
  $(".likenum").val(parseInt($(".likenum").val()) - 1);
0
JSmith 7 sep. 2018 a las 22:51