jQuery: Anwendung addClass() oder removeClass(), um IMG-Kinder eines P

Question

ich ein jQuery-Neuling bin und ich versuche, in den Hafen a script

Es zeigt ein Kreisdiagramm Bild (Anfangsklasse: "primary") und ein Balkendiagramm Bild (Anfangsklasse: „sekundäre“, nicht sichtbar) für die gleichen Daten und die Zuschauer kann das Diagramm klicken, um Flip zwischen Kuchen und Bar:

<style> 
     img.primary { 
       display: inline; 
       cursor: pointer; 
     } 
     img.secondary { 
       display: none; 
     } 
     p.chart:hover, img.secondary { 
       display: inline; 
       cursor: pointer; 
     } 
     p.chart:hover, img.primary { 
       display: none; 
     } 
</style> 

<script type="text/javascript" src="jquery-144.js"> 
</script> 

<script type="text/javascript"> 

$(function() { 
     // remove the "chart" class when the page loads, 
     // to disable hover for JavaScript-enabled users 
     $("p.chart").removeClass("chart"); 

     // XXX add a click-handler for P.chart here? 
}); 

// XXX how to rewrite this in jQuery? 
function swapImages(container) { 
     for (var child in container.childNodes) { 
       child = container.childNodes[child]; 
       if(child.nodeName == "IMG") 
         child.className = (child.className == "primary" ? "secondary" : "primary"); 
     } 
} 
</script> 

und hier ist ein Auszug aus der Web-Seite:

<p class="chart" onclick="swapImages(this);"> 
<img class="primary" width=700 height=280 src="pie.png"> 
<img class="secondary" width=700 height=280 src="bar.png"> 
</p> 

(Hinweis: the "p.chart" class is removed on load so that the charts flip between pie and bar on mouse-hover only for JavaScript disabled users)

Aber meine eigentliche Frage ist, wie die Funktion swapImages() aus reinem JavaScript in jQuery neu geschrieben wird. Ich sollte wohl nennen:

$('p.chart').click(function(e) { 
     .... 
} 

und addClass ("primary") oder removeClass ("sekundäre") es nennen, aber ich vermisse das Bit, wie durch alle IMG-Kinder gehen von das P.chart.

Und brauche ich $ zu nennen ('p.chart'). Klicken (....) oder $ ('p.chart'). Each(). Klicken (....)?

Oder brauche ich hier nicht mehr p.chart und weise einfach Click-Handler den Bildern zu?

Vielen Dank! Alex

Answer 1

Sie können dies tun:

$(function(){ 
     $('p.chart').removeClass(chart); 
     $('p:has(img)').click(function(e){ 
     $("img", this).toggleClass("primary").toggleClass("secondary"); 
    }); 
    }); 

Wenn es zwei Bilder, und Sie müssen die Bilder auf jedem Klick Sie umschalten können einfach die Toggle-Funktion verwenden:

$(function(){ 
     $('p.chart').removeClass(chart); 
     $('p:has(img)').click(function(e){ 
     $("img", this).toggle(); 
     }); 
    }); 

Edit: Aktualisiert der Beitrag laut Kommentar von OP.