• 0

getElementsByClassName لا تعمل بالشكل المطلوب وتعيد أول عنصر فقط

سلام عليكم

عندي زر اسمه اختر عدد البنود مثلا

لما بضغط اي رقم بيفتحلي عدد من القوائم المنسدلة اختار منها البند و جنبه زر تفاصيل لما اضغط عليه يحولني لتفاصيل البند

كنت رابط القائمة بالزر عن طريق id ال selectbox و كان شغال لكن المشكلة انه لو ظهر عندي 4 او 5 قوائم منسدلة الزر بياخد ال id  بتاع اول قايمه فقط 

فحبيت اجرب و اطلب التفاصيل عن طريق ال selectbox classname لكن للاسف مفيش اي استجابة

الكود كالتالي

function showDetails() {
  var sel = document.getElementsByClassName('sedra');
  var selIndex = sel.selectedIndex;

  if (selIndex == 0) {
     alert("الرجاء اختيار قيمة من القائمة المنسدلة");
     return;
  }
	
  var option = sel.options[selIndex].value;

  window.open("accessories/print/print-view.php?id="+option);
}
<select class="form-control prints-value p-0 sedra" required>

<option selected disabled> تحديد الطباعة </option>

<?php

$result = $conn->query("SELECT * FROM print");

while ($row = $result->fetch_assoc()) {
if (empty($row['name'])){

echo '<option type="print" img="' . $row['image'] . '" value="' . $row['id'] . '">كود الطبعة P' . $row['id'] . '/ لم يتم تسجيل اسم للطبعة</option>';   
}
else {

echo '<option class="text-danger" type="print" img="' . $row['image'] . '" value="' . $row['id'] . '">كود الطبعة P' . $row['id'] . '/ اسم الطبعة - ' . $row['name'] . '</option>';
}
}

?>

</select>

</div>

</div>

<div class="col-3 p-0">

<button type="button" class="btn btn-warning" onclick="showDetails()">إستعراض التفاصيل</button>

</div>

انتظر المساعدة الكريمة مع خالص شكري

تم حل مشكلة عدم استجابة ال classname بالشكل التالي


function showDetails() {
  var sel = document.getElementsByClassName('sedra')[0];
  var selIndex = sel.selectedIndex;

  if (selIndex == 0) {
     alert("الرجاء اختيار قيمة من القائمة المنسدلة");
     return;
  }
	
  var option = sel.options[selIndex].value;

  window.open("accessories/print/print-view.php?id="+option);
}

متبقي لي مشكلة انه زي التفاصيل بياخد id اول قائمة فقط

تمّ تعديل بواسطة Wael Aljamal
توضيح السؤال

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0
بتاريخ 1 ساعة قال محمد المصري5:

متبقي لي مشكلة انه زي التفاصيل بياخد id اول قائمة فقط

هذا بسبب تمرير الدليل 0 بشكل دائم، يمكن تمرير id مثلا حسب رقم القائمة

function showDetails(id) 
                    ^^^^^
var sel = document.getElementsByClassName('sedra')[id]; 
                                                 ^^^^^^

حيث أن getElementsByClassName تعيد مصفوفة بجميع العناصر التي لها نفس الصنف، هنا عليك تحديد من هو المقصود وتمييزه بطريقة ما

إن قمت بتطبيق onclick على عنصر ما يمكنك الوصول له عن طريق this :

onclick="myFunction(this)"

ثم يمكنك الوصول للعناصر الأب له أو أي منهم

حيث يتم استقبال العنصر بأي اسم متغير مثلا:

showDetails(element) {
	element ...
}

 

2 اشخاص أعجبوا بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0

إن كان لديك أكثر من قائمة منسدلة وتريد أن تقوم بالمرور عليهم جميعًا ، فيمكنك القيام بذلك من خلال حلقة for كالتالي:

function showDetails() {
  var sels = document.getElementsByClassName('sedra');
  
  for (var sel of sels) {
    var selIndex = sel.selectedIndex;
    
    // تخطي القائمة في حالة كان الإختيار هو رقم 0
    if (selIndex == 0) {
      continue;
    }

    var option = sel.options[selIndex].value;

    window.open("accessories/print/print-view.php?id="+option);
    return;
  }
  
  // تم نقل الكودالشرط التالي خارج حلقة التكرار لأن  في حالة وجود أكثر من قائمة منسدلة، فسيتم تحديد أحدها فقط
  // في حالة لم يتم اختيار أي قيمة من أي قائمة منسدلة
  alert("الرجاء اختيار قيمة من القائمة المنسدلة");
  
}

الكود السابق سوف يقوم بالمرور على كل العناصر التي لديها الصنف sedra وسيقوم بجلب القيمة المختارة، وفي حالة كانت 0 سوف يتم تخطيها، إلى أن يتم العثور على قيمة معينة ثم سيتم إستخدام window.open لفتح الصفحة، وفي حالة لم يكن هناك أي اختيار في أي من القوائم فسوف يتم إظهار رسالة عبر alert.

1 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0
بتاريخ 20 دقائق مضت قال Wael Aljamal:

هذا بسبب تمرير الدليل 0 بشكل دائم، يمكن تمرير id مثلا حسب رقم القائمة


function showDetails(id) 
                    ^^^^^
var sel = document.getElementsByClassName('sedra')[id]; 
                                                 ^^^^^^

حيث أن getElementsByClassName تعيد مصفوفة بجميع العناصر التي لها نفس الصنف، هنا عليك تحديد من هو المقصود وتمييزه بطريقة ما

إن قمت بتطبيق onclick على عنصر ما يمكنك الوصول له عن طريق this :


onclick="myFunction(this)"

ثم يمكنك الوصول للعناصر الأب له أو أي منهم

حيث يتم استقبال العنصر بأي اسم متغير مثلا:


showDetails(element) {
	element ...
}

 

هو نظريا انا استوعبت الفكرة ، لكن هل استأذنك تساعدني في فهمها اكتر بتعديلك على الكود لاقرأه و افهم بشكل عملي؟

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

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0
بتاريخ 3 ساعات قال محمد المصري5:

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

إن بنية الصفحة لديك، غير مفهومة تماماً، لديك اكثر من select وتريد إظهار بيانات من خلال زر وحيد حيث على هذا الزر أن يعرف اي select تغيرت قيمة التحديد فيه.

أفضّل وضع متغير عام يحمل قيمة عنصر select المختار، يتم فيه إسناد هذا الselect من خلال دالة onchange نضعها لكل عناصر select حيث يتم جعل المتحول العام يحمل قيمة this الممرة ل  on change مع تغيير اي عنصر select  بطريقة مشابهة لما سبق...

 

1 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0
بتاريخ 10 ساعات قال Wael Aljamal:

إن بنية الصفحة لديك، غير مفهومة تماماً، لديك اكثر من select وتريد إظهار بيانات من خلال زر وحيد حيث على هذا الزر أن يعرف اي select تغيرت قيمة التحديد فيه.

أفضّل وضع متغير عام يحمل قيمة عنصر select المختار، يتم فيه إسناد هذا الselect من خلال دالة onchange نضعها لكل عناصر select حيث يتم جعل المتحول العام يحمل قيمة this الممرة ل  on change مع تغيير اي عنصر select  بطريقة مشابهة لما سبق...

 

طيب انا حليتها الحمد لله بدالة مختلفة شوية

 

$(document).ready(function() {
		$(document).on('change', '.sedra1', function() {
	var m=$(this).val();

    $('.button > a').attr('href', 'accessories/tatreez/tatreez-view.php?id=' + m );
});
});

و الحمد لله اشتغلت ، تبقى لي فقط إضافة الشرط انه لو كانت الvalue بتاعة selectbox فاضية ( يعني المستخدم لم يقم بتحديد اختيار ) تظهرله رساله تنبيه ، كما تعلمت منكم مسبقا

و قمت بمحاولة التالي لكنها لم تفلح

$(document).ready(function() {
		$(document).on('change', '.sedra1', function() {
	var m=$(this).val();
if( $(this).val() == '' ){
	alert("Please choose some option");
     return;
}else{
    $('.button > a').attr('href', 'accessories/tatreez/tatreez-view.php?id=' + m );
	}
});
});

 

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0
بتاريخ 9 ساعات قال محمد المصري5:

قمت بمحاولة التالي لكنها لم تفلح

ضمن jQuery يتم تمرير this، لقراءة القيمة استخدم

this.value

مباشرة

أو

$(this).find(":selected").val()

 

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية

يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن