کسی میتونه کمک کنه , با این انتخا گر ها دچار مشکل شدم [بایگانی]

ali.monje

شنبه 21 دی 1392, 22:58 عصر

سلام دوستان
داشتم یه کد ساده می نوشتم که با رفتن موس روی یه عکس , یه قسمت از یع باکس کوچیک بشه.
ولی نمیدونم چا انتخاب گر درست عمل نمیکنه این کدش:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
</head>
<style type="text/css">
.box{
height:200px;
width:300px;
border:#999 solid 1px;
border-radius:8px;
background-color:#ccc;
}
.hed{
width:100%;
height:32px;
background-color:#333;
border-radius:8px 8px 0 0;
color:#000;
text-align:center;
font-size:18px;
}
.hide{
float:right;
border-radius:0 8px 0 0;
}
</style>
<script type="text/javascript">
$('img[class="hide"]').hover(function(e) {
$("div.box").animate({height:'200px'});
},function(e){
$("div.box").animate({height:'32px'});
$("div.box").css("border-radius","8px 8px 0 0");

});
</script>
</head>
<body>
<div class="box">
<div class="hed">
<img class="hide" src="e1.png"/>
meno
</div>
</div>
</body>
</html>

مشکل از این خطه

$('img[class="hide"]').hover(function(e) {

یعنی وقتی این خط رو به این تغییر میدم

$(document).hover(function(e) {

یعنی با سند اصلی کار میکنم مشکلی پیش نمی آد ولی تو انتخاب گر مورد نظر من مشکل داره یا من اشتباه نوشتم
کسی چیزی میدونه لطفا راهنمایی کنه
ممنون

danial.saeedi

شنبه 21 دی 1392, 23:17 عصر

e رو حذف کنید ببنید کار می کنه یا نه در ضمن می تونید به روش دیگه ای hide رو انتخاب کنید ممنون!

ali.monje

شنبه 21 دی 1392, 23:40 عصر

e رو حذف کنید ببنید کار می کنه یا نه در ضمن می تونید به روش دیگه ای hide رو انتخاب کنید ممنون!

e رو حذف کردم باز هم نشد , مشکل سر این نیست که hide رو چطور انتخاب کنم , هر چیزی غیر document مینویسم انتخاب نمیشه , مثلا مینویسم img خالی تا تمام تصاویر رو انتخاب کنم ولی باز همین مشکل هست. نمیدونم تکه کدی چیزی یادم رفته که باید بنویسم یا نه!

Javidhb

یک شنبه 22 دی 1392, 01:31 صبح

کدهایی مربوط به جاوااسکریپت رو پایین (قبل از body/) بنویسید:
اینجوری هم سرعت لود صفحتون بیشتر میشه... هم کدهای جاوااسکریپت تا وقتی که المنتهای صفحه لود نشدن اجرا نمیشن.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
</head>
<style type="text/css">
.box{
height:200px;
width:300px;
border:#999 solid 1px;
border-radius:8px;
background-color:#ccc;
}
.hed{
width:100%;
height:32px;
background-color:#333;
border-radius:8px 8px 0 0;
color:#000;
text-align:center;
font-size:18px;
}
.hide{
float:right;
border-radius:0 8px 0 0;
}
</style>
<script type="text/javascript">
$('img[class="hide"]').hover(function(e) {
$("div.box").animate({height:'200px'});
},function(e){
$("div.box").animate({height:'32px'});
$("div.box").css("border-radius","8px 8px 0 0");

});
</script>
</head>
<body>
<div class="box">
<div class="hed">
<img class="hide" src="e1.png"/>
meno
</div>
</div>

<script type="text/javascript">
$('img[class="hide"]').hover(function(e) {
$("div.box").animate({height:'200px'});
},function(e){
$("div.box").animate({height:'32px'});
$("div.box").css("border-radius","8px 8px 0 0");

});
</script>
</body>
</html>

یا اگه میخاید توی head بمونن (که کار درستی نیستی) میتونید از ()ready (http://api.jquery.com/ready/) استفاده کنید.

ali.monje

یک شنبه 22 دی 1392, 08:25 صبح

کدهایی مربوط به جاوااسکریپت رو پایین (قبل از body/) بنویسید:
اینجوری هم سرعت لود صفحتون بیشتر میشه... هم کدهای جاوااسکریپت تا وقتی که المنتهای صفحه لود نشدن اجرا نمیشن.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
</head>
<style type="text/css">
.box{
height:200px;
width:300px;
border:#999 solid 1px;
border-radius:8px;
background-color:#ccc;
}
.hed{
width:100%;
height:32px;
background-color:#333;
border-radius:8px 8px 0 0;
color:#000;
text-align:center;
font-size:18px;
}
.hide{
float:right;
border-radius:0 8px 0 0;
}
</style>
<script type="text/javascript">
$('img[class="hide"]').hover(function(e) {
$("div.box").animate({height:'200px'});
},function(e){
$("div.box").animate({height:'32px'});
$("div.box").css("border-radius","8px 8px 0 0");

});
</script>
</head>
<body>
<div class="box">
<div class="hed">
<img class="hide" src="e1.png"/>
meno
</div>
</div>

<script type="text/javascript">
$('img[class="hide"]').hover(function(e) {
$("div.box").animate({height:'200px'});
},function(e){
$("div.box").animate({height:'32px'});
$("div.box").css("border-radius","8px 8px 0 0");

});
</script>
</body>
</html>

یا اگه میخاید توی head بمونن (که کار درستی نیستی) میتونید از ()ready (http://api.jquery.com/ready/) استفاده کنید.

خیلی ممنون دوست عزیز مشکل حل , و در مورد موضوعی هم که تذکر دادین بینهایت متشکر
اگه به تایپک مراجعه کردین یه سوال از حضورتون داشتم , چطور میشه مختصات موس رو روی مرورگر با جی کوئری به دست آورد؟

Javidhb

یک شنبه 22 دی 1392, 10:51 صبح

pageX و pageY

برای دیدن مثال اینجا رو ببینید... (http://api.jquery.com/event.pagex/)

ali.monje

یک شنبه 22 دی 1392, 15:47 عصر

pageX و pageY

برای دیدن مثال اینجا رو ببینید... (http://api.jquery.com/event.pagex/)

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