jQuery on imageクリックするとdiv内のテキストが表示されます

Question

私は、ページの右側の親指でグループをリストするページを作成しました。親指をクリックすると、関連する画像が左側のdivに表示されます。今、私はそのイメージと一致するイメージの説明を表示しようとしています。 私の仕事は以下の通りです。

の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 --> 

これまでのところ、私はイメージが細かい現れので、私は私が取得する原則の同じ種類を使用すると考えていたサムをクリックしたときに、同様の効果。 スパンがページに表示されないように固定幅でサムを設定しましたが、私はまだスパンを可視にしました。念のために。

私はjQueryでコーディングして以来、それはしばらくしています。だからどこでも荒く見える場合は批判を歓迎します。

おかげで、 クリス

Answer 1

は、いくつかのメソッドの上に行くと離れて微調整することによってそれを解決しました。ここで私が変更したコードの部分があります。

の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> 

私はここに同様の質問に見つかりましたが、それは最初に右に働いて得ることができなかったこの作品。 AdamとNick Craverに感謝します。あなたは私の脳を揚げた。

Answer 2

1つのだけ使用し、イベントハンドラとクリックしたリンク自体の内部の説明を見つける：

$("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

2つのこと：

1. 二時間 をクリックして呼び出すには、最初のクリックの動作を削除します。あなたは以下.work_info

で空のHTMLを入れている

は、あなたが欲しいものを行います。

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

は動作がとてもここで、キャンセルされることuser344215のポイントは、より凝縮されたバージョンであるボードにかかりました：

<!-- 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;  
    }); 

素晴らしいです。