每个循环在jquery外部访问变量

时间：2019-01-29 14:29:03

标签： javascript jquery html loops

我制作了一个遍历所有div调用open_class的循环，然后搜索所有输入并将值保存在全局开口数组中。

但是..开头变量保持为空。.

JavaScript 

var openings = [];
$('.opening_class').each(function () {
    var id = $(this).attr('id');
    var inputs = [];
    $('.opening_class input').each(function (i) {
        inputs.push($(this).val());
    });
    openings[id] = inputs;
});

alert(JSON.stringify(openings));

输入具有输入，但未将其设置为全局开口数组。

如果有人可以帮助，那就太好了

HTML 

<div class="row justify-content-between justify-content-center align-content-center opening_class" id="openingstijden">
    <div class="col-3 p-2 text-center font-weight-bold">Maandag:</div>
        <div class="form-group col-4 p-0 m-0">
            <div class="input-group">
                <input type="text" class="form-control" id="openingstijden_ma_1" placeholder="Van" required="">
            </div>
        </div>
        <div class="form-group col-4 p-0 m-0">
            <div class="input-group">
                <input type="text" class="form-control" id="openingstijden_ma_2" placeholder="Tot" required="">
            </div> 
        </div>
        <div class="col-3 p-2 text-center font-weight-bold">Dinsdag:</div>
        <div class="form-group col-4 p-0 m-0">
            <div class="input-group">
                <input type="text" class="form-control" id="openingstijden_di_1" placeholder="Van" required="">
            </div>
        </div>
        <div class="form-group col-4 p-0 m-0">
            <div class="input-group">
                <input type="text" class="form-control" id="openingstijden_di_2" placeholder="Tot" required="">
            </div> 
        </div>
        <div class="col-3 p-2 text-center font-weight-bold">Woensdag:</div>
        <div class="form-group col-4 p-0 m-0">
            <div class="input-group">
                <input type="text" class="form-control" id="openingstijden_wo_1" placeholder="Van" required="">
            </div>
        </div>
        <div class="form-group col-4 p-0 m-0">
            <div class="input-group">
                <input type="text" class="form-control" id="openingstijden_wo_2" placeholder="Tot" required="">
            </div> 
        </div>
        <div class="col-3 p-2 text-center font-weight-bold">Donderdag:</div>
        <div class="form-group col-4 p-0 m-0">
            <div class="input-group">
                <input type="text" class="form-control" id="openingstijden_do_1" placeholder="Van" required="">
            </div>
        </div>
        <div class="form-group col-4 p-0 m-0">
            <div class="input-group">
                <input type="text" class="form-control" id="openingstijden_do_2" placeholder="Tot" required="">
            </div> 
        </div>
        <div class="col-3 p-2 text-center font-weight-bold">Vrijdag:</div>
        <div class="form-group col-4 p-0 m-0">
            <div class="input-group">
                <input type="text" class="form-control" id="openingstijden_vr_1" placeholder="Van" required="">
            </div>
        </div>
        <div class="form-group col-4 p-0 m-0">
            <div class="input-group">
                <input type="text" class="form-control" id="openingstijden_vr_2" placeholder="Tot" required="">
            </div> 
        </div>
        <div class="col-3 p-2 text-center font-weight-bold">Zaterdag:</div>
        <div class="form-group col-4 p-0 m-0">
            <div class="input-group">
                <input type="text" class="form-control" id="openingstijden_za_1" placeholder="Van" required="">
            </div>
        </div>
        <div class="form-group col-4 p-0 m-0">
            <div class="input-group">
                <input type="text" class="form-control" id="openingstijden_za_2" placeholder="Tot" required="">
            </div> 
        </div>
        <div class="col-3 p-2 text-center font-weight-bold">Zondag:</div>
        <div class="form-group col-4 p-0 m-0">
            <div class="input-group">
                <input type="text" class="form-control" id="openingstijden_zo_1" placeholder="Van" required="">
            </div>
        </div>
        <div class="form-group col-4 p-0 m-0">
            <div class="input-group">
                <input type="text" class="form-control" id="openingstijden_zo_2" placeholder="Tot" required="">
            </div> 
        </div>
    </div>
</div>

2 个答案:

答案 0 :(得分：2)

代码中有几个问题。

需要是一个对象，而不是数组

var openings = {};

使用以下代码，您将选择所有打开的class元素并获取所有输入。您不会在读取ID的类中获取输入

$('.opening_class input').each(function (i) {  // here you are

您应该使用它并找到

$(this).find('input').each(function (i) {  // here you are

您还可以改进代码以使用jQuery的map（）

var openings = {};
$('.opening_class').each(function() {
  var elem = $(this)
  var id = elem.attr('id');
  var inputs = elem.find('input').map(function(i) {
    return this.value
  }).get();
  openings[id] = inputs;
});

console.log(JSON.stringify(openings));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row justify-content-between justify-content-center align-content-center opening_class" id="openingstijden">
  <div class="col-3 p-2 text-center font-weight-bold">Maandag:</div>
  <div class="form-group col-4 p-0 m-0">
    <div class="input-group">
      <input type="text" class="form-control" id="openingstijden_ma_1" placeholder="Van" required="">
    </div>
  </div>
  <div class="form-group col-4 p-0 m-0">
    <div class="input-group">
      <input type="text" class="form-control" id="openingstijden_ma_2" placeholder="Tot" required="">
    </div>
  </div>
  <div class="col-3 p-2 text-center font-weight-bold">Dinsdag:</div>
  <div class="form-group col-4 p-0 m-0">
    <div class="input-group">
      <input type="text" class="form-control" id="openingstijden_di_1" placeholder="Van" required="">
    </div>
  </div>
  <div class="form-group col-4 p-0 m-0">
    <div class="input-group">
      <input type="text" class="form-control" id="openingstijden_di_2" placeholder="Tot" required="">
    </div>
  </div>
  <div class="col-3 p-2 text-center font-weight-bold">Woensdag:</div>
  <div class="form-group col-4 p-0 m-0">
    <div class="input-group">
      <input type="text" class="form-control" id="openingstijden_wo_1" placeholder="Van" required="">
    </div>
  </div>
  <div class="form-group col-4 p-0 m-0">
    <div class="input-group">
      <input type="text" class="form-control" id="openingstijden_wo_2" placeholder="Tot" required="">
    </div>
  </div>
  <div class="col-3 p-2 text-center font-weight-bold">Donderdag:</div>
  <div class="form-group col-4 p-0 m-0">
    <div class="input-group">
      <input type="text" class="form-control" id="openingstijden_do_1" placeholder="Van" required="">
    </div>
  </div>
  <div class="form-group col-4 p-0 m-0">
    <div class="input-group">
      <input type="text" class="form-control" id="openingstijden_do_2" placeholder="Tot" required="">
    </div>
  </div>
  <div class="col-3 p-2 text-center font-weight-bold">Vrijdag:</div>
  <div class="form-group col-4 p-0 m-0">
    <div class="input-group">
      <input type="text" class="form-control" id="openingstijden_vr_1" placeholder="Van" required="">
    </div>
  </div>
  <div class="form-group col-4 p-0 m-0">
    <div class="input-group">
      <input type="text" class="form-control" id="openingstijden_vr_2" placeholder="Tot" required="">
    </div>
  </div>
  <div class="col-3 p-2 text-center font-weight-bold">Zaterdag:</div>
  <div class="form-group col-4 p-0 m-0">
    <div class="input-group">
      <input type="text" class="form-control" id="openingstijden_za_1" placeholder="Van" required="">
    </div>
  </div>
  <div class="form-group col-4 p-0 m-0">
    <div class="input-group">
      <input type="text" class="form-control" id="openingstijden_za_2" placeholder="Tot" required="">
    </div>
  </div>
  <div class="col-3 p-2 text-center font-weight-bold">Zondag:</div>
  <div class="form-group col-4 p-0 m-0">
    <div class="input-group">
      <input type="text" class="form-control" id="openingstijden_zo_1" placeholder="Van" required="">
    </div>
  </div>
  <div class="form-group col-4 p-0 m-0">
    <div class="input-group">
      <input type="text" class="form-control" id="openingstijden_zo_2" placeholder="Tot" required="">
    </div>
  </div>
</div>
</div>

答案 1 :(得分：1)

JS数组不能包含类似php中数组的键。 您需要使用

var openings = {};

代替

var openings = [];
相关问题
最新问题