Question

如何在jQuery函数中更改变量以使其可以在外部读取，例如将其打印到html。当我尝试更改选项时，调试div的内容没有改变。为什么不起作用？

我的代码：

$(document).ready(function() {
  var day;
  var month;
  var year;

  $('#day').change(function() {
    day = true;
  });

  $('#month').change(function() {
    month = true;
  });

  $('#year').change(function() {
    year = true;
  });

  document.getElementById('debug').innerHTML = day + month + year;

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="input-group">
  <select class="custom-select" id="den">
    <option value="Den" disabled selected hidden>Den</option>
    <?php foreach ($datum['dny'] as $dny) : ?>
    <option value="<?= $dny ?>"><?= $dny ?></option>
    <?php endforeach ?>
  </select>
  
  <select class="custom-select" id="mesic">
    <option value="Měsíc" disabled selected hidden>Měsíc</option>
    <?php foreach ($datum['mesice'] as $cislo => $nazev) : ?>
    <option value="<?= $cislo ?>"><?= $nazev ?></option>
    <?php endforeach ?>
  </select>
  
  <select class="custom-select" id="rok">
    <option value="Rok" disabled selected hidden>Rok</option>
    <?php foreach ($datum['roky'] as $roky) : ?>
    <option value="<?= $roky ?>"><?= $roky ?></option>
    <?php endforeach ?>
  </select>
</div>

DEBUG:
    <div id="debug">

    </div>

感谢您的帮助。

Answer 1

您需要检查每个函数以查看是否已填写所有变量，然后设置内容（如果是）。

使用单独的功能来缩短它。

$(document).ready(function() {
  var day;
  var month;
  var year;

  $('#day').change(function() {
    day = this.value;
    check();
  });

  $('#month').change(function() {
    month = this.value;
    check();
  });

  $('#year').change(function() {
    year = this.value;
    check();
  });

  function check() {
    if (day && month && year) {
      document.getElementById('debug').innerHTML = `${day}-${month}-${year}`;
    }
  }
});

pre {
  font-size: 2em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Day
<select id=day><option>
<option>1 <option>2 <option>3
</select> Month
<select id=month><option>
<option>1 <option>2 <option>3
</select> Year
<select id=year><option>
<option>2018 <option>2019 <option>2020
</select>

<pre id=debug></pre>

如何在jQuery函数中更改变量并在函数

1 个答案: