الفريق العربي للبرمجةأرشيف المنتديات · 2000 – 2023
نسخة أرشيفية للقراءة فقط — التسجيل والمشاركة مغلقان، والمحتوى محفوظ كما كان.

مشكلة في jquery

بدأه هالي الدهوكي في 3 أغسطس 2012 · 9 رد · 1,540 مشاهدة · في قسم البرمجة بــ Javascript
مشاركة: واتساب X فيسبوك تيليجرام
#1 صاحب الموضوع

مرحبا شباب كيف الحال إن شاء الله بخير انا صممت موقع و لوحة ادارة لموقعي ... و ضفت فيه تأثيرات حي كويري لكن ضهرتلي مشكلة

اولا

هذا كود جي كويري بدون مشكلة

$ (function (){
$("#hide").hover(function (){
$("#showhide").slideDown(300);
$("#hide").slideUp();
});
});
$ (function (){
$("#showhide").mouseout(function (){
$("#hide").slideDown(300);
$("#showhide").slideUp();
});
});

و هذا تطبيق html ايضا بدون مشكلة

<a href='?cpages=memeaddt.php&show=showtt&tid=".$fetchmemetopics->tid."'><img id='hide' src='images/hide.png' border='0' /><img id='showhide' style='display:none;' src='images/show.png' border='0' /></a><br>

هذا التطبيق يدل اذا مر الماوس على صورة رقم 1 تغير الى 2 و اذا اخذ الماوس بعيد ترجع للوضع الطبيعي بدون مشكلة لحد الأن

لكن كلما وضعت صورتين هكذا 

<a href='?cpages=memeaddt.php&show=showtt&tid=".$fetchmemetopics->tid."'><img id='hide' src='images/hide.png' border='0' /><img id='showhide' style='display:none;' src='images/show.png' border='0' /></a><br>
<a href='?cpages=memeaddt.php&show=showtt&tid=".$fetchmemetopics->tid."'><img id='hide' src='images/hide.png' border='0' /><img id='showhide' style='display:none;' src='images/show.png' border='0' /></a><br>

فقط يطبق على صورة الأوى و الثانية لم تتغير عند مرور الماوس يعني كانه غير معربة في جيكويري

يعني كلما اضفت صورة يطبق فقط على اول صورة .... فما الحل

Professional Technology Information

HTML , CSS , PHP , JQuery , Action Script

Photographic Designer & websites Designer : Dinamic Sites & photographic Sites & Flash Sites

IF YOU WANT SEE MY WORKS

VISIT THIS LINK

Prince Designs

#2

خاصية ID التي تقوم بالاعتماد عليها في تحديد العناصر يجب أن تكون unique

لا يمكن لعنصرين أن يملكا ذات الـ ID وفي حال حصل، فالـ DOM لا تتعرف إلا على العنصر الأول.

انظر التعديل:

<html>
<head>
<script src="jquery.min.js"></script>
<script>
$ (function (){
	$("[hide]").each(function() {
		$(this).hover(function() {
			$(this).next().slideDown(300);
			$(this).slideUp();
		});
	});
	$("[showhide]").each(function() {
		$(this).mouseout(function() {
			$(this).prev().slideDown(300);
			$(this).slideUp();
		});
	});
});
</script></head>
<body>
<a href='?cpages=memeaddt.php&show=showtt&tid=".$fetchmemetopics->tid."'><img hide="hide" src='images/hide.png' border='0' /><img showhide="showhide" style='display:none;' src='images/show.png' border='0' /></a><br>
<a href='?cpages=memeaddt.php&show=showtt&tid=".$fetchmemetopics->tid."'><img hide="hide" src='images/hide.png' border='0' /><img showhide="showhide" style='display:none;' src='images/show.png' border='0' /></a><br>
</body>
</html>

سنقوم بإجراء iteration على جميع العناصر التي تحمل الخاصة hide (وهي غير قياسية لكن يسمح بها من قبل المتصفحات فيCSS2 selectors)

من أجل كل عنصر سنقوم بدفع jQuery إلى ربطه مع event (في هذا المثال الـ event = hover)

ومن ثم نخبره بأنه عند المرور فوق الصورة بالمؤشر فإن jQuery ستجعل العنصر التالي مباشرة next() يظهر، والعنصر الحالي (الذي هو الصورة التي تم إيجادها تحمل الخاصة hide) يختفي.

ذات العملية سنقوم بها مع الصور التي تحمل الخاصة showhide، ولكن الحدث يكون mouseout.

ملاحظة بخصوص الخاصة hide و showhide:

يمكنك كتابتها بالشكل

<img hide src='images/hide.png' border='0' />

أي بدون أن يكون لها قيمة، وستعمل دون مشاكل لأننا نعتمد على اسم الـ attribute وليس على قيمتها value، لكن، يفضل وضع value مهما كانت (ليست فارغة طبعاً) حتى يكون المستند متوافق مع معايير XHTML.

مثال على ذلك حالة readonly أو disabled: http://help.dottoro.com/lhaakiqa.php (انظر الملاحظة في possible values)

2

Do as I say, not as I do

We are Anonymous. We are Legion. We don't forgive. We don't forget

#3

كما ذكر Xacker, الـid يفترض أن يكون فريد لكل عنصر. هذا الكود مثلاً :

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>Fii</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script>
    $(document).ready(function () {
        $("#goo").html("Wow");
    });
    </script>
</head>
<body>
    <div id="goo"></div>
    <div id="goo"></div>
    <div id="goo"></div>
</body>
</html>

غير صحيح لإستخدام أكثر من عنصر لنفس الـid. كي يعمل بشكل صحيح, أبسط طريقة هي أن تبدل الـid بـclass (فهي المناسبة لهذا الغرض) وفي jquery بدل "#" بـ"." (نقطة) :

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>Fii</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script>
    $(document).ready(function () {
        $(".goo").html("Wow");
    });
    </script>
</head>
<body>
    <div class="goo"></div>
    <div class="goo"></div>
    <div class="goo"></div>
</body>
</html>
2
#4

اخواني شكرا لكم و فهمت ما هي الفكرة لكن يوجد مشكلة اخرى

انها تضهر عند مرور و عند رفع الماوس تخفي

لكن اذا وضعت الماوس بسرعة و رفته بسرعة الصورة تثبت الصورة الي في داخل hover >> فأريد بكل احوال و كم تكون سرعة المرور و الرفع ان ترجع الى مكانها فكيف يمكن ذالك

و اسف على الأسله لكني جديد في جي كويري :) ^_^ و احب اتعلمه

تم تعديل هذه المشاركة بواسطة هالي الدهوكي في 3 أغسطس 2012 في 11:02

Professional Technology Information

HTML , CSS , PHP , JQuery , Action Script

Photographic Designer & websites Designer : Dinamic Sites & photographic Sites & Flash Sites

IF YOU WANT SEE MY WORKS

VISIT THIS LINK

Prince Designs

#5

@Mr. B:

للأسف وجدت مشكلة غابت عنّا في استخدام الخاصة class وهي أن العناصر جميعها سيتم تفعيلها إن قام فقط باستبدال # بـ .

سيحتاج لاستخدام each() حتى يتم إنشاء حدث خاص لكل عنصر.

@هالي:

هل هذا مناسب: http://jsfiddle.net/kPuYs/1/ ؟

بدون jQuery.. مجرد CSS

1

Do as I say, not as I do

We are Anonymous. We are Legion. We don't forgive. We don't forget

#6

صحيح لم أنتبه لهذا الشيء. إذا كان الحدث الذي تنتظره هو مرور المؤشر فوق العنصر, فيكمن تعديله لهذا :

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>Fii</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <style>
        .goo {
            padding: 50px;
            background-color: #252a30;
            border: 1px solid #aa9e76;
            color: #ffffff;
            font-family: impact;
            font-size: 30px;
        }
    </style>
    <script>
    $(document).ready(function () {
        $(".goo").hover(
            function() {
                // إذا مر مؤشر الفأرة فوق العنصر
                $(this).html("Wow");
            },
                // إذا إبتعد المؤشر عن العنصر
            function() {
                $(this).html("Mom");
            }
        );
    });
    </script>
</head>
<body>
    <div class="goo">Mom</div>
    <div class="goo">Mom</div>
    <div class="goo">Mom</div>
</body>
</html>

أنا سيء جداً عندما يأتي الموضوع للتحريك الا أنني عملت هذه الحركة ويبدوا أنها تعمل جيداً :

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>Fii</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <style>
        .goo {
            width: 82px;
            height: 72px ;
            display: block;
            padding: 30px;
            background-color: yellow;
            border: 1px solid red;
        }
    </style>
    <script>
    $(document).ready(function () {
        $(".goo").hover(
            function() {
                // إذا مر مؤشر الفأرة فوق العنصر
                $(this).animate({"width" : "165px", "height": "145px"}, 300);
            },
                // إذا إبتعد المؤشر عن العنصر
            function() {
                $(this).animate({"width" : "82px", "height": "72px"}, 300);
            }
        );
    });
    </script>
</head>
<body>
    <img class="goo" src="http://www.marketingpilgrim.com/wp-content/uploads/2008/04/mozilla_dinosaur.png" alt="Img">
    <img class="goo" src="http://www.marketingpilgrim.com/wp-content/uploads/2008/04/mozilla_dinosaur.png" alt="Img">
    <img class="goo" src="http://www.marketingpilgrim.com/wp-content/uploads/2008/04/mozilla_dinosaur.png" alt="Img">
</body>
</html>
#7

مثالك سيعمل بشكل صحيح

لكن في مثاله فالمشكلة أن لديه صورتين

فعند مرور المؤشر فوق الأولى سيتم تنفيذ الجزء الخاص بـ mouse over من حدث hover

الآن اختفت الصورة الأولى وظهرت الثانية

ماذا الآن؟

ما زال حدث hover مرتبط بالصورة الأولى التي اختفت وبالتالي هل يتم تنفيذ mouse out ؟

جرب، سترى بأنه سيحصل flicker بين الصور عند تمرير المؤشر جيئة وذهاباً.

لذلك في الرابط الذي وضعته قمت بدمج الصورتين فوق بعضها البعض وقمت بإظهار واحدة منها فقط بتحديد الأبعاد وإخفاء الـ overflow وتحديد الجزء العلوي من الصورة.

لتنفيذ animate() عليها سيحتاج إلى تحديد CSS property مناسبة .. ولم يسعفني تفكيري بإيجاد واحدة مناسبة :thinking:

1

Do as I say, not as I do

We are Anonymous. We are Legion. We don't forgive. We don't forget

#8

أعتقد أنني بدأت أفهم. مايريده فعلياً أنه سيضع صورة كزر, إذا مر مؤشر الفأرة فوقها تختفي الصورة لتظهر الصورة الثانية. لكنه يريد عمل تأثير عليها.

إذا كان فهمي صحيح, إنظر لهذا الكود :

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>Fii</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <style>
        .main_layer {
            float: left;
            width: 165px;
            height: 145px ;
            display: block;
            border: 1px solid red;
            background-image: url(http://www.marketingpilgrim.com/wp-content/uploads/2008/04/mozilla_dinosaur.png);
        }

        .sub_layer {
            width: 165px;
            height: 145px ;
            display: block;
            border: 1px solid red;
            background-image: url(http://tjshome.com/images/userfilter/mozilladi871P_bw.png);
        }

        .img {
            width: 165px;
            height: 145px ;
        }
    </style>
    <script>
    $(document).ready(function () {
        $(".sub_layer").hover(
            function() {
                // إذا مر مؤشر الفأرة فوق العنصر
                $(this).fadeTo(300 , 0);
            },

            function() {
                // إذا إبتعد المؤشر عن العنصر
                $(this).fadeTo(300 , 1);
            }
        );
    });
    </script>
</head>
<body>

    <div class="main_layer">
      <div class="sub_layer">
        <a href="#">
          <img class="img" src="https://s.ytimg.com/yt/img/pixel-vfl3z5WfW.gif" alt="Img">
        </a>
      </div>
     </div>

    <div class="main_layer">
      <div class="sub_layer">
        <a href="#">
          <img class="img" src="https://s.ytimg.com/yt/img/pixel-vfl3z5WfW.gif" alt="Img">
        </a>
      </div>
     </div>

    <div class="main_layer">
      <div class="sub_layer">
        <a href="#">
          <img class="img" src="https://s.ytimg.com/yt/img/pixel-vfl3z5WfW.gif" alt="Img">
        </a>
      </div>
     </div>

</body>
</html>

وضعت طبقتين فوق بعض وكل واحدة لها خلفية. إذا مر مؤشر الفأرة فوق الطبقتين, فـ"ستتلاشى" وتختفي الطبقة العلوية لتظهر الطبقة السفلى, خاصية الشفافية opacity في css. بالنسبة للصورة الرابط, وضعت خلفية شفافة لها نفس أبعاد الخلفيتين.

هذا آخر بإستخدام slideDown\slideUp :

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>Fii</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <style>

        .wrapper {
            float: left;
            overflow: hide;
        }

        .main_layer {
            width: 165px;
            height: 145px ;
            border: 1px solid red;
            background-image: url(http://www.marketingpilgrim.com/wp-content/uploads/2008/04/mozilla_dinosaur.png);
        }

        .sub_layer {
            width: 165px;
            height: 145px ;
            border: 1px solid red;
            background-image: url(http://tjshome.com/images/userfilter/mozilladi871P_bw.png);
        }

        .img {
            width: 165px;
            height: 145px;
            position: fixed ;
        }

    </style>
    <script>

    $(document).ready(function () {

        $(".wrapper").find(".main_layer").hide();

        $(".wrapper").hover(
            function() {
                // إذا مر مؤشر الفأرة فوق العنصر
                $(this).find(".main_layer").slideDown(300);
                $(this).find(".sub_layer").slideUp();
            },

            function() {
                // إذا إبتعد المؤشر عن العنصر
                $(this).find(".sub_layer").slideDown(300);
                $(this).find(".main_layer").slideUp();
            }
        );
    });
    </script>
</head>
<body>

     <span class="wrapper">
       <a href="#">
         <img class="img" src="https://s.ytimg.com/yt/img/pixel-vfl3z5WfW.gif" alt="Img">
       </a>
       <div class="main_layer"></div>
       <div class="sub_layer"></div>
     </span>

      <span class="wrapper">
       <a href="#">
         <img class="img" src="https://s.ytimg.com/yt/img/pixel-vfl3z5WfW.gif" alt="Img">
       </a>
       <div class="main_layer"></div>
       <div class="sub_layer"></div>
     </span>

      <span class="wrapper">
       <a href="#">
         <img class="img" src="https://s.ytimg.com/yt/img/pixel-vfl3z5WfW.gif" alt="Img">
       </a>
       <div class="main_layer"></div>
       <div class="sub_layer"></div>
     </span>
</body>
</html>

نفس الحركة يمكن علمها بـcss كما أشار Xacker ,بدون تأثير التلاشي, هذا الكود الذي وضعه بعد تصحيح روابط الخلفية http://jsfiddle.net/9MVu5/. وعني أفضل هذه الطريقة لأنها لاتتطلب مجهود كبير.

#9

تمام

الطرق الأخيرة مناسبة وتفي بالغرض إن كان يريد هذه التأثيرات.

Do as I say, not as I do

We are Anonymous. We are Legion. We don't forgive. We don't forget

#10

اخي العزيز Mr.B و Xacker شكرا جزيلا جزيلا جزيلا جزيلا لكم ...

تم الحل لكن بصراحة جربته في ملف html و ليس في مشروعي او برمجية التي كنت احتاج الكود لها لانه البرمجة انتهت قبل يومين و انا كنت مستعجل

فتم الحل و جربته في ملف html عادي عمل و بدون اي مشكلة ....... و بصراحة انا جديد في jqury لهاذا احتجت المساعدة قليلا لكن إن شاء الله استفاد منكم و اي خدمة انا مستعد ان كان بوسعي فعلها لكم .

تم تعديل هذه المشاركة بواسطة هالي الدهوكي في 13 أغسطس 2012 في 03:21

Professional Technology Information

HTML , CSS , PHP , JQuery , Action Script

Photographic Designer & websites Designer : Dinamic Sites & photographic Sites & Flash Sites

IF YOU WANT SEE MY WORKS

VISIT THIS LINK

Prince Designs

مواضيع مشابهة