Jquery ändern Sie die Deckkraft der div auf Klick

Gelesen habe ich verschiedene Fragen zu diesem Thema, aber ich habe nicht eine Lösung gefunden für meinen speziellen Fall.
Ich brauche zum ändern der Deckkraft des thumbUp und thumbDown divs, wenn Sie angeklickt werden. Warum funktioniert mein code nicht funktioniert?

Danke.

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>
  • anstelle der überprüfung für Wert aus der CSS-Eigenschaft, sollten Sie nur hinzufügen/entfernen einer Klasse
InformationsquelleAutor The Condor | 2013-11-23
  1. 5

    Ich würde vorschlagen, (wenn dies ist sehr ähnlich zu Suganthan Antwort) mit toFixed() sowie parseFloat(), die erste analysiert den string-Wert gehalten, wie der aktuelle Wert der opacity, und kürzt den Wert aus der unvorhersehbar (cross-browser) long-Wert von fast 0.6 auf eine Dezimalstelle:

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

    JS Fiddle demo.

    In Präferenz zu der obigen Lösung, obwohl, würde ich vorschlagen, anstatt mit konkreten Klassen zu wechseln, Deckkraft, anstatt zu analysieren, die die CSS-Eigenschaft-Werte selbst, mit der folgenden:

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

    Gepaart mit der (zusätzlichen) CSS:

    .faded {
    opacity: 0.6;
}

.opaque {
    opacity: 1;
}

    (Auch, entfernen Sie die opacity: 0.6; von der #thumbUp/#thumbDown Schaltflächen um dies zu ermöglichen, zu arbeiten, und stellen Sie die entsprechende Stil-Elemente, mit zu beginnen, ich habe Hinzugefügt der Klasse faded beide).

    JS Fiddle demo.

    Zur änderung der Letztgenannte Ansatz, um sicherzustellen, dass 'die Auswahl' ein element hebt die andere:

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

    JS Fiddle demo

    Den oben genannten, natürlich, wird davon ausgegangen, dass Sie sich gesetzt haben, die anfangsklassen angemessen, so dass man die opaque Klasse und der andere hat die faded Klasse; jedoch, zu vereinfachen, und verwenden Sie nur eine weitere Klasse:

    $('#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 demo.

    Auf die jüngste Stellungnahme aus dem OP:

    Den neuesten Bearbeiten ist nicht das, was ich suchte, genau, am Anfang der zwei divs haben opacity = 0.6. wenn ich auf [thumbUp] es wird undurchsichtig, aber wenn ich auf thumbDown die Deckkraft thumbUp muss sich ändern, um 0.6 und thumbDown ist undurchsichtig.

    Ich würde vorschlagen, entfernen der opaque Klasse aus der img Elemente (im Gegensatz zu meinem vorherigen Vorschlag), und verwenden Sie dann die folgenden:

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

    JS Fiddle demo.

    • Schöne Lösung, weniger lesbar für mich, aber kompakter 😉
    • Es funktioniert nicht im Firefox 🙁
    • Ich bin mit deiner Lösung jetzt, können Sie mir helfen, es umzusetzen, zu verwenden, die in firefox?
    • Es arbeitet mit den ids, nicht mit Klassen, denke ich. Ich änderte alle wieder mit ids der divs und es funktioniert, danke 😉
    • Sie sind sehr willkommen, in der Tat!
    • Thomas +1 hat mir sehr geholfen
    • Ich weiß, es ist nicht im Zusammenhang mit Haupt-Frage, aber wie kann ich eines der beiden divs' Deckkraft zurück auf 0,6, wenn der andere ausgewählt ist? Danke 😉
    • Der aktuellste edit ist nicht das, was ich gesucht hatte gesagt, am Anfang die beiden divs haben opacity = 0.6. wenn ich auf thumUp es wird undurchsichtig, aber wenn ich auf thumbDown die Deckkraft thumbUp muss sich ändern, um 0,6 und thumbDown werden undurchsichtig...ist es klar genug? 🙂
    • Ich danke Ihnen sehr!!!!!

    InformationsquelleAutor David Thomas
  2. 2

    Natürlich glaube ich nicht die Ursache kennen, lassen Sie mich zu finden, aber das ist eine Arbeit

    $(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');
    });
});
    • Ich weiß nicht, warum, aber so funktioniert es...warum dieser seltsame Wert auf Deckkraft??
    • Condor lassen Sie mich überprüfen, in der Konsole bekam ich das seltsame Wert
    • Es funktioniert nicht im Firefox 🙁
    • Condor aktualisiert
    InformationsquelleAutor Suganthan Madhavan Pillai
  3. 0

    Sind Sie wahrscheinlich Probleme beim Lesen der opacity Eigenschaft richtig und das könnte sich ändern, basierend auf browser -. Versuchen.

    .clicked {
  opacity: 1.0;
}

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

    Versuchen Sie auch, machen .clicked eine Priorität, indem Sie es an der Unterseite des CSS-und unten #thumbDown.

    • Nope, das funktioniert nicht, entweder.
    • Ja, ich dachte, Sie würden in laufen id eine Priorität über class
    InformationsquelleAutor beautifulcoder
Schreibe einen Kommentar