• 0 رای - 0 میانگین
  • 1
  • 2
  • 3
  • 4
  • 5
مخفی و آشکار شدن یک div خاص
#1
سلام .
من چندین دایو با کلاس مشابه دارم .
میخوام وقتی موس روی یکی از دایوهای خارجی قرار گرفت ، دایو زیر اون از حالت hide به show تبدیل بشه .
[/php]برای این حالت که دایو ، جزئ فرزندش نیست ، نمیدونم باید از چه سلکتوری استفاده کنم ؟Blush

کد:
<div class="div1"></div>
<div class="main">
    <div class="div2"></div>
</div>

<div class="div1"></div>
<div class="main">
    <div class="div2"></div>
</div>

js:
کد:
$(document).ready(function(){
    $(".div2").hide();
    $(".div1").mouseenter(function() {
    $(".div2:first-of-type").show();
      }).mouseleave(function() {
        $(this).children(".div2").hide();
      });
});
آرام باش ؛ توكل كن ؛ تفكر كن و سپس آستينها را بالا بزن , آنگاه دستان خداوند را خواهي ديد كه زودتر از تو دست به كار شده است.امام علي عليه السلام.
  پاسخ
تشکر شده توسط :
#2
کد:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<style type="text/css">
div{position:relative; width:300px; height:50px; margin-bottom:50px;}
.div1{background-color:green;}
.main{background-color:red; display:none;}
</style>
<body>
<div class="div1"></div>
<div class="main">
    <div class="div2"></div>
</div>

<div class="div1"></div>
<div class="main">
    <div class="div2"></div>
</div>
<script>
$('.div1').mouseenter(function(e) {
    $(this).next('.main').css('display','block');
});
$('.div1').mouseleave(function(e) {
    $(this).next('.main').css('display','none');
});
</script>
</body>
</html>
هر که با مرغ هوا دوست شود - خوابش آرامترین خواب جهان خواهد بود.
  پاسخ
تشکر شده توسط : molana pary_daryayi
#3
ممنونم . من میخوام div2 درون main آشکار بشه .
کد شما رو به این شکل تغییر دادم اما نتیجه نداد .
کد:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" language="javascript" src="jquery.js"></script>
</head>
<style type="text/css">
div{width:300px; height:50px; margin-bottom:50px;}
.div1{background-color:green;}
.div2{background-color:#FF6633;display:none;}
.main{background-color:#bbb; height:200px}
</style>
<body>
<div class="div1"></div>
<div class="main">
    <div class="div2"></div>
</div>

<div class="div1"></div>
<div class="main">
    <div class="div2"></div>
</div>
<script>
$('.div1').mouseenter(function(e) {
    $(this).next('.main .div2').css('display','block');
});
$('.div1').mouseleave(function(e) {
    $(this).next('.main .div2').css('display','none');
});
</script>
</body>
</html>
آرام باش ؛ توكل كن ؛ تفكر كن و سپس آستينها را بالا بزن , آنگاه دستان خداوند را خواهي ديد كه زودتر از تو دست به كار شده است.امام علي عليه السلام.
  پاسخ
تشکر شده توسط :
#4
کد:
$('.div1').mouseenter(function(e) {
    $(this).next('.main').children(".div2").css('display','block');
});
$('.div1').mouseleave(function(e) {
    $(this).next('.main').children(".div2").css('display','none');
});

jsfiddle
به یـزدان که گر ما خرد داشتیم
کجـا این سر انجـام بد داشتیم؟
  پاسخ
تشکر شده توسط : pary_daryayi hamid_80386
#5
ممنون از راهنمایی هاتون .
من هنوز با سلکتور ها مشکل دارم . اینجا رو هم نگاه کردم ولی جوابم رو نگرفتم .
اگر منطق خاصی بین اجزا نباشه چی ؟ بعنوان مثال دایو main بلافاصله بعد از div1 نباشه و بینشون اجزای دیگه هم قرار داشته باشه .
مثل این :
کد:
<div class="div1"></div>
<div class="div3"></div>
<p></p>
<div class="main">
    <div class="div2"></div>
</div>

<div class="div1"></div>
<div class="div3"></div>
<p></p>
<div class="main">
    <div class="div2"></div>
</div>
ممنون میشم یک الگو بدید که ایده بگیرم . یا لینک کاملتری نسبت به لینک بالایی معرفی کنید .
آرام باش ؛ توكل كن ؛ تفكر كن و سپس آستينها را بالا بزن , آنگاه دستان خداوند را خواهي ديد كه زودتر از تو دست به كار شده است.امام علي عليه السلام.
  پاسخ
تشکر شده توسط :
#6
نقل قول:اگر منطق خاصی بین اجزا نباشه چی ؟
اگر میبینید ساختار dom خیلی پیچیده است، از id استفاده کنید سریعتره( درسته کدها سمت کلاینت اجرا میشه ولی باید به فکر cpu کاربر هم باشیم).


نقل قول: بعنوان مثال دایو main بلافاصله بعد از div1 نباشه و بینشون اجزای دیگه هم قرار داشته باشه .
کد:
<div>
        <div class="div1"></div>
        <div class="div3"></div>
        <p></p>
        <div class="main">
            <div class="div2"></div>
        </div>
    </div>
    <div>
        <div class="div1"></div>
        <div class="div3"></div>
        <p></p>
        <div class="main">
            <div class="div2"></div>
        </div>
    </div>
کد:
$('.div1').mouseenter(function(e) {
    $(this).parent().find(".div2").css('display','block');
});
$('.div1').mouseleave(function(e) {
    $(this).parent().find(".div2").css('display','none');
});
jsfiddle.net
به یـزدان که گر ما خرد داشتیم
کجـا این سر انجـام بد داشتیم؟
  پاسخ
تشکر شده توسط : pary_daryayi hamid_80386
#7
نقل قول:اگر میبینید ساختار dom خیلی پیچیده است، از id استفاده کنید سریعتره( درسته کدها سمت کلاینت اجرا میشه ولی باید به فکر cpu کاربر هم باشیم).
درسته ، در اینجا استفاده از id خیلی راحت تر جواب میده ، اما من یک حلقه دارم که تعدادی دایو ، در اون دارن تکرار میشن و مجبورم از کلاس استفاده کنم .
--------------
بابت کد ممنون ، اما این کد همه ی div2 ها رو همزمان نمایش میده ، نه دایوی که پایین div1 مربوطه هست .
آرام باش ؛ توكل كن ؛ تفكر كن و سپس آستينها را بالا بزن , آنگاه دستان خداوند را خواهي ديد كه زودتر از تو دست به كار شده است.امام علي عليه السلام.
  پاسخ
تشکر شده توسط :
#8
نقل قول:اما من یک حلقه دارم که تعدادی دایو ، در اون دارن تکرار میشن و مجبورم از کلاس استفاده کنم .
کدتون رو بگذارید.

نقل قول: اما این کد همه ی div2 ها رو همزمان نمایش میده ، نه دایوی که پایین div1 مربوطه هست .
(۱۳۹۴ تير ۲۳, ۰۳:۲۰ ب.ظ)sara147 نوشته: jsfiddle.net
اینجا که درسته و مشکلی نیست.
به یـزدان که گر ما خرد داشتیم
کجـا این سر انجـام بد داشتیم؟
  پاسخ
تشکر شده توسط : pary_daryayi
#9
نقل قول:بابت کد ممنون ، اما این کد همه ی div2 ها رو همزمان نمایش میده ، نه دایوی که پایین div1 مربوطه هست
بعید میدونم هاااا، چون از کلمه کلیدی this استفاده شده، مگه سلکتور شروع اشتباه باشه
هر که با مرغ هوا دوست شود - خوابش آرامترین خواب جهان خواهد بود.
  پاسخ
تشکر شده توسط : pary_daryayi
#10
درسته . شما برای دایو ها ، یک دایو اصلی قرار دادید که من اینو نداشتم . تشکر Heart
آرام باش ؛ توكل كن ؛ تفكر كن و سپس آستينها را بالا بزن , آنگاه دستان خداوند را خواهي ديد كه زودتر از تو دست به كار شده است.امام علي عليه السلام.
  پاسخ
تشکر شده توسط :


پرش به انجمن:


کاربران در حال بازدید این موضوع: 1 مهمان