ضبط عملية حسابية بال jQuery

محمد المصري12 · 23 يوليو 2021

سلام عليكم

صورة توضيحية للمشكلة

و ايضا فيديو توضيحي

2021-07-23_22-55-07.mp4

الكود

<script>
$(document).ready(function() {

  $(document).on('change', '.color-select', function() { // whats happens when color select change
// define variable color = calling the main div element then find input text with classname number-input , and give it the same value of selectbox called color-select
var color = $(this).closest(".buttons-fields").find('input.number-input').val($(this).val()); 
  });
//#############################################################
// ################## Mathmatic operation #############################  
  $(document).on('change', '.count1', function() {  //whats happend when count1 element value change
var total = $(this).closest(".buttons-fields").find('input.total').val((color * $('.number-input').val())); 
  });	

});

كيف اضبط العملية الحسابية ؟

سمير عبود · 23 يوليو 2021

سأفترض أن الهيكلية الخاصة بالعناصر كالتالي:

<!-- Main Container -->
<div class="main-container">
  
  <!-- Select Box Container -->
  <div>
    <select name="name" class="color-select">
      <option value="" disabled>Select option</option>
      <option value="1000">option 1</option>
      <option value="2000">option 2</option>
      <option value="3000">option 3</option>
      <option value="4000">option 4</option>
    </select>
    <!-- Select Box Container Close -->
  </div>
  
  <!-- text Input Container -->
  <div>
    <input type="number" name="number-input1" class="number-input1" readonly>
    <!-- Close text Input Container -->
  </div>
  
  <!-- text Input Container -->
  <div>
    <input type="number" name="number-input2" class="number-input2" value="1">
    <!-- Close text Input Container -->
  </div>
  
  <div>
    <input type="number" name="total" class="total-number" readonly>
  </div>

</div>
<!-- end main container -->

<!-- Main Container -->
<div class="main-container">
  <!-- Select Box Container -->
  <div>
    <select name="name" class="color-select">
      <option value="" disabled>Select option</option>
      <option value="1000">option 1</option>
      <option value="2000">option 2</option>
      <option value="3000">option 3</option>
      <option value="4000">option 4</option>
    </select>
    <!-- Select Box Container Close -->
  </div>
  <!-- text Input Container -->
  <div>
    <input type="number" name="number-input1" class="number-input1" readonly>
    <!-- Close text Input Container -->
  </div>
  <div>
    <input type="number" name="number-input2" class="number-input2" value="1">
    <!-- Close text Input Container -->
  </div>
  <div>
    <input type="number" name="total" class="total-number" readonly>
  </div>

</div>
<!-- end main container -->

<!-- Main Container -->
<div class="main-container">
<!-- Select Box Container -->
  <div>
    <select name="name" class="color-select">
    <option value="" disabled>Select option</option>
    <option value="1000">option 1</option>
    <option value="2000">option 2</option>
    <option value="3000">option 3</option>
    <option value="4000">option 4</option>
  </select>
<!-- Select Box Container Close -->
  </div>
<!-- text Input Container -->
  <div>
    <input type="number" name="number-input1" class="number-input" readonly>
<!-- Close text Input Container -->
  </div>
  <div>
    <input type="number" name="number-input2" class="number-input2" value="1">
<!-- Close text Input Container -->
  </div>
  <div>
    <input type="number" name="total" class="total-number" readonly>
  </div>

</div>
<!-- end main container -->

عليه يُمكنك حساب حاصل الضرب بالشكل التالي:

$(document).ready(function() {
  $(document).on('change', '.color-select', function() {
    var selectedVal = $(this).val(),
        $mainContEl = $(this).parents('div.main-container'),
        $numberInputEl1 = $mainContEl.children().find("input.number-input1"),
        $numberInputEl2 = $mainContEl.children().find("input.number-input2"),
        $totalInputEl = $mainContEl.children().find("input.total-number");
    $numberInputEl1.val(selectedVal);
    $totalInputEl.val(selectedVal * $numberInputEl2.val())
  });
  
  
  $(document).on('change keyup', '.number-input2', function() {
    var currentVal = $(this).val(),
        $mainContEl = $(this).parents('div.main-container'),
        $numberInputEl1 = $mainContEl.children().find("input.number-input1"),
        $totalInputEl = $mainContEl.children().find("input.total-number");
    $totalInputEl.val(currentVal * $numberInputEl1.val())
  });
});

إستخدمت فقط دوال الإنتقال لتحديد العناصر المطلوبة ثم قمت بضرب القيم و تغيير قيمة حقل المجموع الموافقة. و استخدمت حدثي change و keyup

يُمكنك تجربة المثال من هنا:

محمد المصري12 · 24 يوليو 2021

استفدت بكل حرف و فهمت فكرة الانتقال

اشكرك جدا جدا جدا و تقبل تحياتي

ضبط عملية حسابية بال jQuery

السؤال

محمد المصري12

رابط هذا التعليق

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

2 أجوبة على هذا السؤال

Recommended Posts

سمير عبود

رابط هذا التعليق

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

محمد المصري12

رابط هذا التعليق

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

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية