PDA

View Full Version : مبتدی: سوال در مورد تغییر کد Jquery



yuttrim20
دوشنبه 11 اردیبهشت 1391, 22:34 عصر
این کد اصلی

<html>
<head>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".flip").click(function(){
$(".panel").slideToggle("slow");
});
});
</script>

<style type="text/css">
div.panel,p.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.panel
{
height:120px;
display:none;
}
</style>
</head>

<body>

<div class="panel">
<p>Because time is valuable, we deliver quick and easy learning.</p>
<p>At W3Schools, you can study everything you need to learn, in an accessible and handy format.</p>
</div>

<p class="flip">Show/Hide Panel</p>

</body>
</html>
این یک دونه اسلاید ایجاد میکنه حالا من برای این که دوتا اسلاید یا بیشتر داشته باشم و این که روی هر اسلاید که کلیک کنم فقط همون باز شه نه هر دو اسلاید!
توی کد :

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".flip").click(function(){
$(".panel").slideToggle("slow");
});
});
</script>
باید تغییر ایجاد بشه که من اینجوری

$(document).ready(function () {
$(".flip1").click(function () {
$(".panel").slideToggle("slow");

$(".flip2").click(function() {
$(".panel").slideToggle("slow");
});
});
تغییرش دادم که بازم نشدباز روی هر کدوم از اسلاید ها کلیک کنم هردو اسلاید باز میشن
اگه ممکنه کمکم کنین!

yuttrim20
سه شنبه 12 اردیبهشت 1391, 15:14 عصر
خودم جوابشو پیدا کردم:لبخند:

تابع رو باید اینجوری تغییر داد:
<script type="text/javascript">
$(document).ready(function() {
$(".flip1").click(function() {
$(".panel1:[class=panel1]").slideToggle("slow");
});
$(".flip2").click(function() {
$(".panel2:[class=panel2]").slideToggle("slow");
});
});
</script>
مسلما بقیه کد تاپیک قبل رو باید متناسب با این تابع باید تغییر داد.

mehdi.mousavi
یک شنبه 17 اردیبهشت 1391, 14:00 عصر
خودم جوابشو پیدا کردم مسلما بقیه کد تاپیک قبل رو باید متناسب با این تابع باید تغییر داد.

سلام.
پیش خودتون فکر کردید که اگر 50 تا Panel داشتید چیکار باید کنید؟ نکنه قصد دارید 50 بار اون کد رو تکرار کنید؟ :(
اگر فرض کنیم ساختار HTML شما این باشه:

<div class="panel">
</div>
<p class="flip">Show/Hide Panel</p>

اونوقت براحتی میتونید برای 1 یا 50 تا Panel از این کد استفاده کنید:

$(".flip").click(function() {
$(this).prev().slideToggle("slow");
});

کد فوق، میگه هر وقت روی Element ای حاوی کلاس flip کلیک شد، Element قبلی اش رو بگیر (که میشه Panel) و slideToggle رو روی اون Call کن.

موفق باشید.

پاورقی: برای اینکه سریعتر بتونید مساله رو بررسی کنید، اینو واستون نوشتم (http://jsfiddle.net/qRn5J/).