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

سؤال

بدأه Zinos في 8 أغسطس 2013 · 4 رد · 573 مشاهدة · في قسم البرمجة بــ Javascript
تواصلاجتماعي
مشاركة: واتساب X فيسبوك تيليجرام
#1 صاحب الموضوع

بسم الله الرحمن الرحيم

السلام عليكم ورحمة الله وبركاته

 

في البداية اريد أن اهنئكم بمناسبة عيد الفطر المبارك.

 

وثانيا لدي سؤال اردت ان اطرحه هنا لعلي اجد ما اريده عندكم.

 

السؤال:

 

أنا اعمل على موقع تواصل أجتماعي وواجهتني مشكلة الا وهي:

 

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

 

ولكن انا استخدمت جيكيوري كالتالي:

 

html

<div class="post_class" id="post">
Zinos Post
</div>

css

.post_class{height:50px;border:solid #000;border-width:1px;}

.post_click{height:150px;border:solid #000;border-width:1px;}

 

js

$(document).ready(function(){

$("#post").click(function () {
      $(this).toggleClass("post_click");
});

});

ملاحظة: طبعا هذا بس مثال مبسط لشرح السؤال.

 

 

لا يوجد أي مشكلة حتى الأن, ولو أستخدمت هذا الكود سيعمل بدون اي مشاكل.
 

ولكن بالتأكيد عندما ينشر الناس سوف يكون هنالك اكثر من بوست واحد بالعشرات والمئات في الصفحة الواحدة وكلها سوف تمتلك نفس id وبهذا راح يخربط الجافاسكربت.

 

لأوضح أكثر: أستبدل كود html بهذا الكود وجرب:

<div class="post_class" id="post">
Zinos Post
</div>

<div class="post_class" id="post">
anther post
</div>

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

 

وأريد حلا لهذا.

 

وفي المرفقات موجود المثال.

 

وشكرا...

Zinos-Test.html

تم تعديل هذه المشاركة بواسطة Zinos في 8 أغسطس 2013 في 14:36

#2

أولاً أخي استخدام نفس المعرف id لأكثر من وسم خطأ، استخدم Markup Validation Service لإكتشاف أخطاء الـhtml لديك. النقطة الثاني الـselector الخاص بـjquery يدعم العديد من طرق الإختيار غير الإختيار بالـid فقط انظر إلى توثيقه Selectors | jQuery API Documentation.

 

طالما أن كل المربعات تستخدم الـclass المسمى بـpost_class، إجعل الـselector يستخدم الـclass بدلاً من الـid، فقط بدّل:

$("#post").click(function () {
      $(this).toggleClass("post_click");
});

بـ:

$(".post_class").click(function () {
      $(this).toggleClass("post_click");
});

وأزل id="post":

 

<div class="post_class">
Zinos Post
</div>
 
<div class="post_class">
anther post
</div>

تم تعديل هذه المشاركة بواسطة Mr.B في 8 أغسطس 2013 في 15:53

1
#3
Mr.B كتب:

 

أولاً أخي استخدام نفس المعرف id لأكثر من وسم خطأ، استخدم Markup Validation Service لإكتشاف أخطاء الـhtml لديك. النقطة الثاني الـselector الخاص بـjquery يدعم العديد من طرق الإختيار غير الإختيار بالـid فقط انظر إلى توثيقه Selectors | jQuery API Documentation.

 

طالما أن كل المربعات تستخدم الـclass المسمى بـpost_class، إجعل الـselector يستخدم الـclass بدلاً من الـid، فقط بدّل:

$("#post").click(function () {
      $(this).toggleClass("post_click");
});

بـ:

$(".post_class").click(function () {
      $(this).toggleClass("post_click");
});

وأزل id="post":

<div class="post_class">
Zinos Post
</div>
 
<div class="post_class">
anther post
</div>

أخي الكريم اولا اشكرك جزيل الشكر على ارد.

 

وثانيا: طريقتك في تغير الاي دي الى كلاس لا تفرق بهذا سوف يكون للكل نفس الكلاس اي لن يفرق.

 

المطلوب هو عمل طريقة بدون استخدام شيء موحد مثل: onClick ولكن بتضمين الجيكيوري فيه, وهذا الذي لا أعلمه.

 

أو اي طريقة أخرى لا تستخد select بشيء موحد كالاي دي والكلاس.

 

وأشكرك جزيل الشكر مرة أخرى...

#4

لا أظن أني فهمت قصدك؟

 

للمعلومية أن العنصر الذي تضغطه سيتأثر وحده فقط ولن يطبق التأثير على العناصر الباقي التي تستخدم نفس الـclass، تماماً كـonclick، جربها فقط.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Zinos Test</title>
  <style>
.post_class{height:50px;border:solid #000;border-width:1px;}
 
.post_click{height:150px;border:solid #000;border-width:1px;}
  </style>
  <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
  <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
  <script>
$(document).ready(function(){
 
$(".post_class").click(function () {
      $(this).toggleClass("post_click");
});
 
});
  </script>
</head>

<body>

<div class="post_class">
Zinos Post
</div>
 
<div class="post_class">
anther post
</div>

</body>
</html>

أيضاً يمكنك اضافة id خاص بكل div، لامانع.

تم تعديل هذه المشاركة بواسطة Mr.B في 8 أغسطس 2013 في 16:07

2
#5

شكرا لك أخي العزيز لم افهمك جيدا في الرد الأول ولكن في الرد الثاني فهمت ما كنت تقصده.

 

وتم الحل والحمدلله, واشكرك جزيل الشكر.

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