Перемножение полей

409

24 ноября 2016, 09:49

Как перемножить значение поля "Вес" именно с тем пробы, у которого нет класса uk-hidden? Пока не получилось реализовать даже по событию click.

$(document).ready(function() { 
  var gold = $("select[name=gold]").val() * 1; 
  var silver = $("select[name=silver]").val() * 1; 
  var weight = $("input[name=weight]").val() * 1; 
 
  // Показываем список проб и цену за грамм при загрузке 
  if ($("select[name=metal]").val() == "gold") { 
    $('select[name=silver]').addClass('uk-hidden'); 
 
    $("span.value").text(gold); 
    $("span.result").text(gold * weight); 
  } else { 
    $('select[name=gold]').addClass('uk-hidden'); 
 
    $("span.value").text(silver); 
    $("span.result").text(silver * weight); 
  } 
}); 
 
$(function() { 
  var gold = $("select[name=gold]").val() * 1; 
  var silver = $("select[name=silver]").val() * 1; 
  var weight = $("input[name=weight]").val() * 1; 
 
  // Отображаем список проб 
  $("select[name=metal]").change(function() { 
    if ($(this).val() == "gold") { 
      $('select[name=silver]').addClass('uk-hidden'); 
      $('select[name=gold]').removeClass('uk-hidden'); 
    } else { 
      $('select[name=gold]').addClass('uk-hidden'); 
      $('select[name=silver]').removeClass('uk-hidden'); 
    } 
  }) 
 
  // Расчитываем 
  $("a[name=send]").click(function() { 
    if ($('select[name=silver]').hasClass("uk-hidden")) { 
      var result = gold * weight; 
    } else { 
      var result = silver * weight; 
    } 
 
    $("span.value").text(gold); 
    $("span.result").text(result); 
  }); 
});

.uk-hidden { 
  display: none; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<form class="uk-form"> 
  <fieldset> 
    <select name="metal" class="uk-form-large uk-width-1-1 uk-margin-bottom"> 
      <option value="gold">Золото</option> 
      <option value="silver">Серебро</option> 
    </select> 
 
    <select name="gold" class="uk-form-large uk-width-1-1 uk-margin-bottom"> 
      <option value="2500">999</option> 
      <option value="2400">958</option> 
      <option value="2200">850</option> 
      <option value="2000">750</option> 
      <option value="1600">585</option> 
      <option value="1600">583</option> 
      <option value="900">375</option> 
      <option value="2000">56</option> 
    </select> 
 
    <select name="silver" class="uk-form-large uk-width-1-1 uk-margin-bottom uk-hidden"> 
      <option value="35">925</option> 
      <option value="27">875</option> 
      <option value="18">750</option> 
      <option value="15">500</option> 
      <option value="100">84</option> 
    </select> 
 
    <input name="weight" type="text" class="uk-form-large uk-width-1-1 uk-margin-bottom" value="2" placeholder="Вес"> 
 
    <a name="send" class="uk-width-1-1 uk-button uk-button-large uk-button-primary">Рассчитать</a> 
 
    <p>Цена за грамм <span class="value">___</span> руб.</p> 
    <p>Сумма на руки <span class="result">___</span> руб.</p> 
  </fieldset> 
</form>

Answer 1

Сейчас, судя по вашему коду, цена за грамм и количество грамм устанавливается по загрузке страницы и в процессе работы не меняется (при нажатии "Рассчитать"). Получение этих значений необходимо осуществлять по событию нажатия:

$("a[name=send]").click(function() {	 
	gold = $("select[name=gold]").val() * 1; 
    silver = $("select[name=silver]").val() * 1; 
    weight = $("input[name=weight]").val() * 1; 
	 
    if ($('select[name=silver]').hasClass("uk-hidden")) { 
      var result = gold * weight; 
    } else { 
      var result = silver * weight; 
    } 
 
    $("span.value").text(gold); 
    $("span.result").text(result); 
});