He leído varias preguntas acerca de este tema pero no he encontrado una solución para mi caso en particular.
Necesito cambiar la opacidad de la thumbUp y thumbDown divs cuando se hace clic. ¿Por qué mi código no funciona?

Gracias.

HTML

<body>
<div id="container">
    <div id="foto">
        <img src="images/feu.jpg">
    </div>
    <div id="descrizione">
        <p class="title">Feu d'artifice</p>
        <p>Giacomo Balla<br>
           1916-1917<br>
        </p>
        <div id="likeButtons">
            <p>Ti piace quest'opera?</p>
            <img id="thumbUp" src="images/thumbup.png">
            <img id="thumbDown" src="images/thumbdown.png">
        </div>
    </div>
    <div id="pulsanteOpera" class="pulsante" style="padding: 30px 20px 0 0;float:right;">
        <a href="#"></a>
    </div>    
</div>
</body>

CSS

#likeButtons{
position:relative;
right:-50%;
width:500px;
overflow:hidden;
font-weight:300;
margin-bottom:50px;
} 

#likeButtons p{
float:left;
}

#likeButtons img{
width:10%;
margin-bottom:30px;
padding-left:10px;
float:left;
cursor:pointer;
}

#thumbUp,#thumbDown{
opacity:0.6;
}

JQuery

<script>
    $(document).ready(function(e) {
        $('#pulsanteOpera').click(function(){
    $(this).toggleClass('pulsante').toggleClass('pulsanteRimuovi');
        });
    $('#thumbDown').click(function(){
            if($(this).css('opacity')==0.6)
        $(this).css('opacity','1.0');
        else
        $(this).css('opacity','0.6');
    });
    });
</script> 
  • en lugar de la comprobación de valor de la propiedad CSS, sólo debe agregar/eliminar una clase
InformationsquelleAutor The Condor | 2013-11-23

3 Comentarios

  1. 5

    Me gustaría sugerir (aunque esto es muy similar a Suganthan la respuesta) el uso de toFixed() así como parseFloat(), que por primera vez analiza la cadena de valor considera el valor actual de opacity, y abrevia la que el valor de la impredecible (cross-browser) de largo valor de casi 0.6 a un decimal:

    $('#thumbDown, #thumbUp').click(function(){
        $(this).css('opacity', function(i,o){
            return parseFloat(o).toFixed(1) === '0.6' ? 1 : 0.6;
        });
    });

    JS Violín demo.

    Con preferencia a la solución anterior, sin embargo, te sugiero que en lugar de utilizar clases específicas para cambiar la opacidad, en lugar de tener que analizar la propiedad de CSS-valores, utilizando los siguientes:

    $('#thumbDown, #thumbUp').click(function(){
        $(this).toggleClass('faded opaque');
    });

    Junto con la (adicional) CSS:

    .faded {
        opacity: 0.6;
    }
    
    .opaque {
        opacity: 1;
    }

    (También, eliminar la opacity: 0.6; de la #thumbUp/#thumbDown botones para permitir que esto funcione, y el estilo de los elementos para empezar, he añadido la clase de faded a ambos).

    JS Violín demo.

    Para enmendar el segundo enfoque para asegurar que la ‘selección’ de un elemento que se anula la selección de la otra:

    $('#thumbDown, #thumbUp').click(function(){
        $(this).parent().find('img').toggleClass('faded opaque');
    });

    JS Violín demo

    Lo anterior, por supuesto, asume que usted ha establecido la inicial de clases adecuada, de modo que uno tiene la opaque clase y la otra tiene el faded clase; sin embargo, para simplificar y utilizar sólo uno clase adicional:

    $('#thumbDown, #thumbUp').click(function(){
        $(this).parent().find('img').toggleClass('opaque');
    });

    CSS:

    #thumbUp, #thumbDown {
        opacity: 0.6; /* restored the default opacity here */
        position: relative;
    }
    #thumbUp.opaque, #thumbDown.opaque {
        opacity: 1;
    }

    JS Violín demo.

    Para abordar el comentario más reciente de la OP:

    La última edición no es lo que yo estaba buscando, precisamente, en un principio los dos divs han opacity = 0.6. si hago clic en [thumbUp] se vuelve opaco, pero si hago clic en thumbDown la opacidad de thumbUp debe cambiar a 0.6 y thumbDown se vuelven opacos.

    Me gustaría sugerir la eliminación de la opaque clase de la img elementos (contrario a mi sugerencia anterior) y, a continuación, utilizando la siguiente:

    $('#thumbDown, #thumbUp').click(function(){
        $(this).addClass('opaque').siblings('.opaque').removeClass('opaque');
    });

    JS Violín demo.

    • Solución agradable, menos legible para mí, pero más compacto 😉
    • No funciona en Firefox 🙁
    • Estoy usando la solución ahora, ¿me pueden ayudar a implementar para su uso en firefox?
    • Funciona con el ids, no con las clases de pienso. He cambiado todos de nuevo utilizando los identificadores de las divs y funciona, gracias 😉
    • Está muy bien recibidos!
    • Thomas +1 me ha ayudado mucho
    • Sé que no es relativa a la cuestión principal, pero ¿cómo puedo hacer que uno de los dos divs la opacidad de volver a 0.6 si el otro es seleccionado? Gracias 😉
    • La última edición no es lo que yo estaba buscando, precisamente, en un principio los dos divs tener una opacidad = 0.6. si hago clic en thumUp se vuelve opaco, pero si hago clic en thumbDown la opacidad de thumbUp debe cambiar a 0,6 y thumbDown se vuelven opacos…es lo suficientemente claro? 🙂
    • Muchas gracias!!!!!

  2. 2

    Obviamente no sé la razón, me permitió encontrar que pero esto es trabajo

    $(document).ready(function(e) {
        $('#pulsanteOpera').click(function(){
           $(this).toggleClass('pulsante').toggleClass('pulsanteRimuovi');
        });
    $('#thumbDown').click(function(){
        console.log($(this).css('opacity'))
           if(parseFloat($(this).css('opacity')).toFixed(1)==0.6)
                $(this).css('opacity','1.0');
            else
                $(this).css('opacity','0.6');
        });
    });
    • No sé por qué, pero esto funciona…¿por qué esa extraña valor de opacidad??
    • Cóndor me permiten comprobar, en la consola tengo que extraño valor
    • No funciona en Firefox 🙁
    • Cóndor actualizado
  3. 0

    Usted probablemente está teniendo problemas para leer el opacity propiedad correctamente y esto puede cambiar basado en navegador. Intente.

    .clicked {
      opacity: 1.0;
    }
    
    $('#thumbDown').click(function(){
      $(this).toggleClass('clicked');
    }

    También, trate de hacer .clicked una prioridad colocándolo en la parte inferior de tu CSS y a continuación #thumbDown.

    • No, esto no funciona bien.
    • Sí, me imaginé que tendría que ejecutar en id ser una prioridad por encima de class

Dejar respuesta

Please enter your comment!
Please enter your name here