jQuery auf Bild klicken enthüllen Text desc in div

Question

Ich habe eine Seite erstellt, die eine Gruppe auf den Daumen auf der rechten Seite der Seite auflistet. Wenn ein Daumen angeklickt wird, wird das relevante Bild in einem div zu seiner Linken gezeigt. Jetzt versuche ich die Bilderbeschreibung zu zeigen, die zu dem Bild passt. Bis jetzt ist meine Arbeit wie folgt;

jQuery //

<!-- Swap portfolio image on click --> 
$("ul.thumbs li a").click(function() { 
var mainImage = $(this).attr("href"); //Find Image Name 
$(".work_two_third_column_copy img").attr({ src: mainImage }); 
return false; 
}); 

<!-- Get image description on click --> 
$("ul.thumbs li a").click(function() { 
var tip = $(this).css("visibility:visible"); 
$(".one_sixth_column_copy .work_info").html(""); 
}); 

HTML //

<div class="work_two_third_column_copy"> 
<a href=""><img src="main_image1.gif"></a> 
</div><!-- End .work_two_third_column_copy --> 


<div class="one_third_column_right"> 

<div class="one_sixth_column"> 
<div class="one_sixth_column_copy"> 
<div class="work_info">&nbsp;</div><!-- End Image Information --> 
</div><!-- End .one_sixth_column_copy --> 
</div><!-- End .one_sixth_column --> 

<div class="one_sixth_column_thumbs"> 
<ul class="thumbs"> 
<li><a href="main_image1.gif"><img src="1.gif"><span class="tip">number one desc</span></a></li> 
<li><a href="main_image2.gif"><img src="2.gif"><span class="tip">number two desc</span></a></li> 
<li><a href="main_image3.gif"><img src="4.gif"><span class="tip">number three desc</span></a></li> 
<li><a href="main_image4.gif"><img src="5.gif"><span class="tip">number four desc</span></a></li> 
</ul><!-- ul.thumbs --> 
</div><!-- End .one_sixth_column_thumbs --> 

</div><!--End .one_third_column_right --> 

So weit, wenn ich den Daumen klicken, um die Bilder zeigen, fein und so dachte ich, dass ich die gleiche Art von Prinzipien nutzen könnte zu bekommen ein ähnlicher Effekt. Ich habe die Daumen auf eine feste Breite eingestellt, so dass die Spanne nicht auf der Seite angezeigt wird, aber ich habe immer noch die Sichtbarkeit der Spanne gemacht: versteckt; Nur um sicher zu gehen.

Irgendwelche Vorschläge, es ist eine Weile her, seit ich in jQuery codiert habe, also wenn es rau aussieht, ist überall Kritik willkommen.

Danke, Chris

Answer 1

es wurde gelöst, indem über ein paar Methoden gehen und Tweaking entfernt. Hier sind die Teile meines Codes, die ich geändert habe.

jQuery //

<!-- Swap portfolio information on click --> 
    $(function() { 
     $("ul.thumbs li a").click(function() { 
     $(".work_info p").text($(this).next().text()); 
     return false; 
     }); 
    }); 

HTML //

<li><a href="main_image1.gif"><img src="1.gif"></a><p>number one text</p></li> 
<li><a href="main_image2.gif"><img src="2.gif"></a><p>number two text</p></li> 

Dieses Stück, das ich hier auf eine ähnliche Frage gefunden, aber konnte es nicht direkt am ersten Arbeitstag. Ein besonderer Dank geht an Adam und Nick Craver. Du hast mein Gehirn entfrischt.

Answer 2

Verwenden Sie nur eine Event-Handler und finden die Beschreibung im Inneren des geklickt Link selbst:

$("ul.thumbs li a").click(function() { 
    var mainImage = $(this).attr("href"); //Find Image Name 

    //Set image: 
    $(".work_two_third_column_copy img").attr({ src: mainImage }); 

    //Find description: 
    var oDescSpan = $(this).find(".tip"); 
    if (oDescSpan.length == 1) 
     $(".one_sixth_column_copy .work_info").html(oDescSpan.html()); 
    else 
     $(".one_sixth_column_copy .work_info").html(""); 

    return false; 
}); 

Answer 3

Zwei Dinge:

1. zum zweiten Mal Aufruf klicken entfernt das erste Verhalten klicken.
2. Sie tut

Unten in .work_info leeren HTML setzen, was Sie wollen:

var clickerSetup = function() { 
    $("ul.thumbs li a").click(function() { 
     var mainImage = $(this).attr("href"); //Find Image Name 
     $(".work_two_third_column_copy img").attr({ src: mainImage }); 
     var tip = $(this).css("visibility:visible"); 
     $(".one_sixth_column_copy .work_info").html($(this).text()); 

     return false 
    }); 
}; 
$(document).ready(function() { 
    clickerSetup(); 
}); 

Answer 4

Nahm auf Punkt-Vorstand user344215, dass das Verhalten abgebrochen werden würde, also hier ist eine gekürzte Fassung:

<!-- Swap portfolio image and desc on click --> 
    $("ul.thumbs li a").click(function() { 
     var mainImage = $(this).attr("href"); //Find Image Name 
     $(".work_two_third_column_copy img").attr({ src: mainImage }); 
     $(".work_info p").text($(this).next().text()); 
     return false;  
    }); 

Es funktioniert super.