كليك روي هر تصوير و نمايش اطلاعات آن [بایگانی]

partala

یک شنبه 12 اردیبهشت 1389, 15:28 عصر

با سلام و خسته نباشيد
من چند تصوير دارم كه وقتي كه روي آن كليك ميكنم يك سري اطلاعات را نشان دهد. و وقتي روي شكل بعدي كليك ميكنم اطلاعات آن شكل را نمايش دهد.

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document.p).click(function () {
if ($("div.info").is(":hidden")) {
$("div.info").show("slow");
} else {
$("div.info").hide();
}
});
</script>
<style>
.info {
border-top: 1px solid #FFF;
border: 5px solid #e3e3e3;
padding:5px;
background:#FFF;
color:#000;
display:none;
float: left;
}
</style>
</head>
<body>
<p style="width: 147px; height: 65px;">
<img alt="intro" height="65" src="2.jpg" width="148"></p>
<div class="info">مقدمه - بازگو كردن به زبان ديگرو بيان موضوع خودتان به طور كلي</div>
&nbsp
<p style="width: 160px; height: 108px;">
<img src="file:///E:/zamanian/New%20Folder/ielts%2089/9.png" height="109" width="157"></p>
<div class="info">neda</div>
&nbsp
<p style="width: 151px; height: 106px;">
<img src="file:///E:/zamanian/New%20Folder/ielts%2089/7.png" height="106" width="154"></p>
<div class="info">goli</div>
&nbsp
<p style="width: 145px; height: 102px;">
<img src="file:///E:/zamanian/New%20Folder/ielts%2089/6.png" height="102" width="150"></p>
<div class="info">mitra</div>
&nbsp
<p style="width: 140px; height: 70px;">
<img src="file:///E:/zamanian/New%20Folder/ielts%2089/5.jpg" height="78" width="148"></p>
<div class="info">elham</div>
&nbsp
</body>
</html>

اما هروقت روي يك شكل كليك ميكنم همه با هم باز ميشوند. در حالي كه من ميخوام روي هر شكلي كه كليك ميشه پنل مورد نظرش باز بشه.
ميشه راهنمايي ام كنيد؟

mehdi.mousavi

یک شنبه 12 اردیبهشت 1389, 17:25 عصر

با سلام و خسته نباشيد من چند تصوير دارم كه وقتي كه روي آن كليك ميكنم يك سري اطلاعات را نشان دهد. و وقتي روي شكل بعدي كليك ميكنم اطلاعات آن شكل را نمايش دهد. اما هروقت روي يك شكل كليك ميكنم همه با هم باز ميشوند. در حالي كه من ميخوام روي هر شكلي كه كليك ميشه پنل مورد نظرش باز بشه. ميشه راهنمايي ام كنيد؟

سلام.
البته که میشه... کدتون رو به این کدی که اینجا قرار دادم، تغییر بدید:

$(function () {
$('p').click(function () {
var $info = $(this).next();
if ($info.is(":hidden")) {
$info.show("slow");
} else {
$info.hide();
}
});
});

موفق باشید.