انتخاب عنصر مورد نظر در html به وسیله jquery و تغییر مشخصات آن [بایگانی]

alismith

شنبه 30 بهمن 1389, 22:57 عصر

سلام به برنامه نویسان عزیز هم سمت سرور هم کلاینت

یه مشکلی برام پیش اومده که ممنون می شم یکی از دوستان لطف کنه خیلی اصولی و در عین حال واضح جوابم رو بده ;)

سوال: فرض می گیریم ما در یک صفحه html دو عصر img داریم که قرار است هر وقت ماوس روی آنها رفت اندازه آنها تغییر کنه .

من تا اینجا بلدم مشکلم اینکه اگه من بخوام این دستور رو طوری بنویسم که تمام عکس ها رو با id های مختلف تشخیص بده و اگه مثلا img با id=1 بود اون دستور فقط روی img با id=1 تاثیر بگذاره و همینطور ادامه بده

$(document).ready(function(){

$("img[name='pic'][id='2']").hover(function(){

$(this).css('width','230px').css('height','200px') ;
});

});

مثلا این دستور نمی تونه برای تمام img هایی که name=pic دارند کارا باشه چون فقط id=2 رو پوشش میده
حالا من چکار کنم که id به صورت خودکار تشخیص داده بشه
فرض بگیرید تعداد عناصر img در صفحه متغییر است و نمی توان از قبل تعداد id و دستورات jquery را مشخص نمود

لطفا کمک کنید چون واقعا به جوابش احتیاج دارم. ممنون :لبخندساده:

ricky22

یک شنبه 01 اسفند 1389, 11:53 صبح

سلام.
جواب شما در Selector های jQuery پیدا می شه.
مثلا می تونید کنترل IMG خود را اینگونه بنویسید :

<img id=test class=someclass>

<img id=test2 class=someclass>
و بعد Selecotr را اینگونه بنویسید.

$(.someclasss)
این راهی هست که به ذهن من می رسد شما ممکن است راههای بهتری هم باشد.
http://api.jquery.com/class-selector/
http://refcardz.dzone.com/refcardz/jquery-selectors
http://www.javascriptworkshop.com/2008/06/28/jquery-selectors-cheatsheet/

mehdi.mousavi

یک شنبه 01 اسفند 1389, 12:34 عصر

حالا من چکار کنم که id به صورت خودکار تشخیص داده بشه فرض بگیرید تعداد عناصر img در صفحه متغییر است و نمی توان از قبل تعداد id و دستورات jquery را مشخص نمود لطفا کمک کنید چون واقعا به جوابش احتیاج دارم. ممنون :لبخندساده:

سلام.
میتونید بدین شکل عمل کنید:

$(function() {
$("img[name='pic']").hover(function() {
var id = $(this).attr('id');
//do whatever you need with that specific image...
});
});

اینجا، ابتدا من همه تصاویری که name اشون pic هست رو انتخاب میکنم. حالا هر وقت Mouse بره روی یکی از این تصاویر (مثلا تصویری با id ی 2) در اونصورت با استفاده از attr('id') شناسه مورد نظر رو بدست میارم (که در مثال ما id میشه 2). بعد هم هر کاری مایل بودید با اون Id ی خاص انجام بدید.

موفق باشید.

alismith

یک شنبه 01 اسفند 1389, 13:20 عصر

خیلی ممنون.
اما فکر کنم کل سورس رو بگذارم تا خودتون ببینید بهتره چون مشکلم حل نشد

<html>

<head>

<style type="text/css">

BODY{margin: 40x;}

.imageCover{

position: static;
width: 150px;
height: 150px;
background: #fff;
border: 1px solid #ccc;
border-bottom: 2px solid #ccc;
-webkit-transition-duration: 200ms;
vertical-align: middle;
float: left;

}

img{

width: 150px;
height: 150px;
-webkit-transition-duration: 150ms;
absalign: middle;
-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.7, transparent), to(rgba(255, 255, 255, 0.2) ));
-moz-box-reflect: below 0px -moz-linear-gradient(left, transparent, color-stop(0.8, transparent), rgba(255, 255, 255, 0.2));

}

</style>

<script language="havascript" type="Application/javascript" src="jquery-1.4.4.min.js"></script>

<script language="havascript" type="Application/javascript">

$(document).ready(function(){

$("li[name='tvic'][id='2']").hover(function(){

$(this).css('position','relative');
$("img[name='tvi'][id='2']").css('width','230px').css('height','200px').css(' margin','10px');
$(this).css('width','250px').css('height','250px') .css('top','-20').css('left','-10');

},

function(){

$(this).css('position','static');
$("img[name='tvi'][id='2']").css('width','150px').css('height','150px').css(' margin','0');
$(this).css('width','150px').css('height','150px') .css('top','').css('left','');

});

});
</script>

</head>

<body>

<ul type="none">
<li name="tvic" id="1" class="imageCover">
<center>
<img name="tvi" id="1" src="2.jpg"/>
</center>
</li>

<li name="tvic" id="2" class="imageCover">
<center>
<img name="tvi" id="2" src="2.jpg"/>
</center>
</li>
</ul>

</body>
</html>

لطفا ببینید میشه کاری کرد ؟؟ البته بگم اینجا دوتا عکس هستش اما من از قبل نمی تونم تعداد رو شخص کنم هم برای عکس و هم li ممنون.

alismith

یک شنبه 01 اسفند 1389, 13:47 عصر

دوستان عزیز که لطف کردید و به من کمک کردید من سورس رو به شکل زیر تغییر دادم و تا حد زیادی مشکلم حل شد

<html>

<head>

<style type="text/css">

BODY{margin: 40x;}

.imageCover{

position: static;
width: 150px;
height: 150px;
background: #fff;
border: 1px solid #ccc;
border-bottom: 2px solid #ccc;
-webkit-transition-duration: 200ms;
vertical-align: middle;
float: left;

}

.img{

width: 150px;
height: 150px;
-webkit-transition-duration: 150ms;
absalign: middle;
-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.7, transparent), to(rgba(255, 255, 255, 0.2) ));
-moz-box-reflect: below 0px -moz-linear-gradient(left, transparent, color-stop(0.8, transparent), rgba(255, 255, 255, 0.2));

}

</style>

<script language="havascript" type="Application/javascript" src="jquery-1.4.4.min.js"></script>

<script language="havascript" type="Application/javascript">

$(document).ready(function(){

$(".imageCover").hover(function(){

$(this).css('position','relative');
$(".img").hover(function(){ $(this).css('width','230px').css('height','200px') .css('margin','10px');});
$(this).css('width','250px').css('height','250px') .css('top','-20').css('left','-10');

},

function(){

$(this).css('position','static');
$(".img").css('width','150px').css('height','150px').css(' margin','0');
$(this).css('width','150px').css('height','150px') .css('top','').css('left','');

});

});
</script>

</head>

<body>

<ul type="none">
<li name="tvic" id="1" class="imageCover">
<center>
<img name="tvi" id="1" class="img" src="2.jpg"/>
</center>
</li>

<li name="tvic" id="2" class="imageCover">
<center>
<img name="tvi" id="2" class="img" src="2.jpg"/>
</center>
</li>
</ul>

</body>
</html>

ممنون :چشمک:

mehdi.mousavi

یک شنبه 01 اسفند 1389, 15:13 عصر

سلام.
آقا این چه کدی هستش که نوشته اید؟ کدی که نوشته اید رو میشه اینطور نوشت:

$(function() {
$('.imageCover').hover(function() {
$(this).css({
'position': 'relative',
'width': 250,
'height': 250,
'top': '-20',
'left': '-10'
});
}, function() {
$(this).css({
'position': 'static',
'width': '150px',
'height': '150px',
'top': '0',
'left': '0'
});
});
});

اما اینم مناسب نیست. بجای اینکار میام یک class جدید تعریف می کنم:

li.active {
position: relative;
width: 250px;
height: 250px;
}

و کدم رو به این شکل تغییر میدم:

$(function() {
$('.imageCover').hover(function() {
$(this).addClass('active');
}, function() {
$(this).removeClass('active');
});
});

حالا هر وقت mouse روی imageCover قرار بگیره، active class رو به اون element نسبت میدم. هر وقت هم از روی اون کنار بره، اون class رو ازش میگیرم...

موفق باشید.

alismith

یک شنبه 01 اسفند 1389, 21:05 عصر

سلام.
آقا این چه کدی هستش که نوشته اید؟ کدی که نوشته اید رو میشه اینطور نوشت:

$(function() {
$('.imageCover').hover(function() {
$(this).css({
'position': 'relative',
'width': 250,
'height': 250,
'top': '-20',
'left': '-10'
});
}, function() {
$(this).css({
'position': 'static',
'width': '150px',
'height': '150px',
'top': '0',
'left': '0'
});
});
});

اما اینم مناسب نیست. بجای اینکار میام یک class جدید تعریف می کنم:

li.active {
position: relative;
width: 250px;
height: 250px;
}

و کدم رو به این شکل تغییر میدم:

$(function() {
$('.imageCover').hover(function() {
$(this).addClass('active');
}, function() {
$(this).removeClass('active');
});
});

حالا هر وقت mouse روی imageCover قرار بگیره، active class رو به اون element نسبت میدم. هر وقت هم از روی اون کنار بره، اون class رو ازش میگیرم...

موفق باشید.

آقا دست شما درد نکنه، ممنون که پیگیر سوال من بودید اما باید بگم این چیزی که شما نوشتید فقط شکل بهینه کدی هستش که من تو این تاپیک قرار دادم که اونم بعد با همین روش تعریف class و تابع toggleClass اصلاح کردمش.
اما حالا اصل موضوع این بود که (البته همین روش هم یجورایی مشکل رو حل کرد) من می خواستم دستوری بنویسم که هر وقت ماوس روی li رفت خود این عنصر و img ای که درون این عنصر است تغییرات متفاوتی را به صورت یکجا و باهم داشته باشند و ماوس خارج شد این تغییرات به حالت اول برگردد
حالا خیلی ممنون می شم که اگه با دیدن کدهایی که تو پست قبلی فرستادم کاملا متوجه منظور من شدید این امکان رو به li اضافه کنید که با رفتن ماوس برروی آن به جز کار های قبلی یک عنصر مشخص مثلا یک p که در همان li هست نمایش داده شود و ماوس رفت hidden شود. پیش فرض هم همون hidden هستش. (مثلا با opacity)
لطفا به این موضوع توجه کنید که این کد باید به گونه ای باشه که تعداد li img p برای آن اهمیت نداشته باشد و به ترتیب بعد از قرار گرفتن ماوس روی هر li :
img و p آن دستخوش تغییرات ذکر شده گردد.

خیلی ممنون امیدوارم از سوال خسته نشده باشید! :متفکر:

mehdi.mousavi

دوشنبه 02 اسفند 1389, 13:10 عصر

سلام.

حالا خیلی ممنون می شم که اگه با دیدن کدهایی که تو پست قبلی فرستادم کاملا متوجه منظور من شدید این امکان رو به li اضافه کنید که با رفتن ماوس برروی آن به جز کار های قبلی یک عنصر مشخص مثلا یک p که در همان li هست نمایش داده شود و ماوس رفت hidden شود. پیش فرض هم همون hidden هستش. (مثلا با opacity) لطفا به این موضوع توجه کنید که این کد باید به گونه ای باشه که تعداد li img p برای آن اهمیت نداشته باشد و به ترتیب بعد از قرار گرفتن ماوس روی هر li : img و p آن دستخوش تغییرات ذکر شده گردد. خیلی ممنون امیدوارم از سوال خسته نشده باشید! :متفکر:

بسیار خوب. این دو Style رو به کدتون اضافه کنید:

li.active {
position: relative;
width: 250px;
height: 250px;
}
.imageCover p {
display:none;
}

اینم HTML ای که به هر li اش یک p اضافه کردم:

<body>
<ul type="none">
<li name="tvic" id="1" class="imageCover">
<center>
<img name="tvi" id="1" class="img" src="2.jpg"/>
<p>The paragraph associated with image#1</p>
</center>
</li>

<li name="tvic" id="2" class="imageCover">
<center>
<img name="tvi" id="2" class="img" src="2.jpg"/>
<p>The paragraph associated with image#2</p>
</center>
</li>
</ul>
</body>

و در نهایت، کد JavaScript ای که Effect مورد نظرتون رو ایجاد کنه:

$(function() {
$('.imageCover').hover(function() {
$(this).toggleClass('active').find('p').toggle();
});
});

موفق باشید.