Jquery modifier l'opacité de la div sur cliquez sur

J'ai lu diverses questions au sujet de cette question, mais je n'ai pas trouvé une solution pour mon cas particulier.
J'ai besoin de changer l'opacité de la thumbUp et thumbDown divs quand on clique dessus. Pourquoi mon code ne fonctionne pas?

Merci.

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>
  • au lieu de vérifier la valeur d'une propriété CSS, vous devez juste ajouter/supprimer une classe
InformationsquelleAutor The Condor | 2013-11-23
  1. 5

    Je te suggère (mais c'est très similaire à Suganthan de réponse) à l'aide de toFixed() ainsi que parseFloat(), qui, la première analyse de la chaîne de valeur comme la valeur actuelle de opacity, et abbréviations que la valeur de l'imprévisible (cross-browser) valeur long de presque 0.6 à une décimale:

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

    JS Fiddle démo.

    De préférence à la solution ci-dessus, si, je vous suggère d'utiliser des classes spécifiques pour basculer l'opacité, plutôt que d'avoir à analyser le de la propriété CSS-valeurs, en utilisant les éléments suivants:

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

    Couplé avec le (supplémentaires) CSS:

    .faded {
    opacity: 0.6;
}

.opaque {
    opacity: 1;
}

    (Retirez aussi la opacity: 0.6; de la #thumbUp/#thumbDown les boutons permettant de faire ce travail, et de définir le style approprié sur les éléments pour commencer, j'ai ajouté la classe de faded à la fois).

    JS Fiddle démo.

    De modifier la dernière approche pour s'assurer que "la sélection" un élément désélectionne les autres:

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

    JS Fiddle démo

    Ci-dessus, bien sûr, suppose que vous avez mis la première classes de manière appropriée de sorte que l'on a le opaque la classe et les autres a la faded classe; cependant, afin de simplifier et d'utiliser seulement un classe supplémentaire:

    $('#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 Fiddle démo.

    À l'adresse le commentaire le plus récent à partir de l'OP:

    La dernière édition n'est pas ce que je recherchais justement, au début les deux divs ont opacity = 0.6. si je clique sur [thumbUp], il devient opaque, mais si je clique sur thumbDown l'opacité de thumbUp doivent changer pour 0.6 et thumbDown est devenu opaque.

    J'aimerais proposer la suppression de la opaque classe à partir de la img éléments (contrairement à ma suggestion précédente), puis en utilisant les suivantes:

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

    JS Fiddle démo.

    • Solution sympa, moins lisible pour moi, mais le plus compact 😉
    • Il ne fonctionne pas sur Firefox 🙁
    • Je suis à l'aide de votre solution maintenant, pouvez-vous m'aider à mettre en œuvre pour une utilisation dans firefox?
    • Il fonctionne avec les id, pas avec les cours, je pense. J'ai changé tout l'arrière à l'aide ids pour les divs, et ça fonctionne, merci 😉
    • Vous êtes tout à fait les bienvenues!
    • Thomas +1 m'a beaucoup aidé
    • Je sais que c'est pas liée à la question principale, mais comment puis-je faire de l'un des deux divs' opacité de retour à 0,6 si l'autre est sélectionné? Merci 😉
    • La dernière édition n'est pas ce que je recherchais justement, au début les deux divs opacité = 0.6. si je clique sur thumUp, il devient opaque, mais si je clique sur thumbDown l'opacité de thumbUp doit changer à 0,6 et thumbDown est de devenir opaque...est-ce assez clair? 🙂
    • Merci beaucoup!!!!!

    InformationsquelleAutor David Thomas
  2. 2

    Évidemment, je ne sais pas la raison, permettez-moi de trouver cela, mais cela fonctionne

    $(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');
    });
});
    • Je ne sais pas pourquoi, mais cela fonctionne...pourquoi cette étrange valeur de l'opacité??
    • Condor permettez-moi de vérifier, dans la console que j'ai eu cette étrange valeur
    • Il ne fonctionne pas dans Firefox 🙁
    • Condor mis à jour
    InformationsquelleAutor Suganthan Madhavan Pillai
  3. 0

    Vous sont probablement de la difficulté à la lecture de la opacity propriété correctement, ce qui pourrait changer en fonction du navigateur. Essayez de.

    .clicked {
  opacity: 1.0;
}

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

    Aussi, essayez de faire .clicked une priorité en la mettant au fond de votre CSS et ci-dessous #thumbDown.

    • Non, cela ne fonctionne pas non plus.
    • Oui, j'ai pensé que vous pourriez exécuter en id être une priorité sur class
    InformationsquelleAutor beautifulcoder