javascript - 如何从 UI 创建所需数据

Question

我有一个用户界面，其中有一些复选框，我试图将其转换为对象数组。一个对象有 3 个键 Counter，Name 和 IsActive 所有这些都是对象，将在数组中

当checkbox打开时isActive应该是Y，我这里是根据我已经完成的任务得到一些好的方法

我做了什么

var Data = {
  "Counter A": ["CounterA1.jpg", "CounterA2.jpg"],
  "Counter B": ["CounterB1.jpg"],
  "Counter C": ["CounterC1.jpg"]
}


var counter = {};
var name = {};
var flag = {};


for (var key in Data) {
  var newCard = $(`<div>
					      <div class="card-header"></div>
					      <ul class="list-group list-group-flush">
					      </ul>
					    </div>`);
  var ul_innerhtml = "";

  $(".card-header", newCard).text(key);
  Data[key].forEach(d => {

    ul_innerhtml += '<li class="list-group-item">' + d + '<label class="switch "><input name="type" type="checkbox" class="success" value="' + d + '"><span class="slider round"> </span></label></li>'



    counter = {
      "Counter": key
    } // geting name but it is only giving last counter i.e C
    name = {
      "Name": d
    } // same fpor this 

  });


  $(".list-group", newCard).append(ul_innerhtml);
  $(".card").append(newCard.html());


}
$("#btn").click(function() {


  console.log(counter) // printing counter C only


})

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
  float: right;
}


/* Hide default HTML checkbox */

.switch input {
  display: none;
}


/* The slider */

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input.success:checked+.slider {
  background-color: #8bc34a;
}

input:checked+.slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}


/* Rounded sliders */

.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="container">
  <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
    <div class="card" style="margin: 10px 0">
    </div>
  </div>
  <button id="btn" class="btn btn-default commonButton" type="submit">
			<i class="fa fa-search"></i>&nbsp;Go
  </button>
</div>

点击开始我正在打印数据，但它只提供了一个数据

我想像这样创建对象

[ { "Counter": "Counter A", "Name": "CountA1.jpg", "IsActive":"Y" },
  { "Counter": "Counter A", "Name": "CountA2.jpg", "IsActive":"N" },
  { "Counter": "Counter B", "Name": "CountB1.jpg", "IsActive":"Y" },
  { "Counter": "Counter C", "Name": "CountC1.jpg", "IsActive":"Y" }]

因为我以后的工作才需要这个结构

Answer 1

因为您可以在渲染后动态设置复选框 的值。更好的方法是迭代生成的 DOM 以获取实时值。希望这会有所帮助。

var Data = {
  "Counter A": ["CounterA1.jpg", "CounterA2.jpg"],
  "Counter B": ["CounterB1.jpg"],
  "Counter C": ["CounterC1.jpg"]
}


var counters = [];
var name = {};
var flag = {};


for (var key in Data) {
  var newCard = $(`<div>
					      <div class="card-header"></div>
					      <ul class="list-group list-group-flush">
					      </ul>
					    </div>`);
  var ul_innerhtml = "";

  $(".card-header", newCard).text(key);
  Data[key].forEach(d => {
    ul_innerhtml += '<li class="list-group-item"><span>' + d + '</span><label class="switch "><input name="type" type="checkbox" class="success" value="' + d + '"><span class="slider round"> </span></label></li>'
  });


  $(".list-group", newCard).append(ul_innerhtml);
  $(".card").append(newCard.html());


}
$("#btn").click(function() {
  $('.card .list-group').each((i, listGroup) => {
    $listGroup = $(listGroup);
    $listGroup.find('li').each((j, list) => {
      let counter = {
        "Counter": $listGroup.prev().text()
      }
      $list = $(list);
      counter.Name = $list.find('span').text();
      counter.IsActive = $list.find('input').is(":checked") ? 'Y' : 'N';
      counters.push(counter)
    })
  });
  console.log(counters);
})

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
  float: right;
}


/* Hide default HTML checkbox */

.switch input {
  display: none;
}


/* The slider */

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input.success:checked+.slider {
  background-color: #8bc34a;
}

input:checked+.slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}


/* Rounded sliders */

.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="container">
  <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
    <div class="card" style="margin: 10px 0">
    </div>
  </div>
  <button id="btn" class="btn btn-default commonButton" type="submit">
			<i class="fa fa-search"></i>&nbsp;Go
  </button>
</div>