ضبط عملية حسابية بال 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

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية