Question

我有一个UI，其中有复选框，并使用CSS将它们作为开关，因此我必须从UI创建所需的数据格式，它是{内objects的数据{1}}，我尝试创建它，但没有想到要循环对象

我做了什么

array

var i = 0;

function updateObj(data) {
  //write your code to update your flag from false to true;
}
var Data = {
  "Counter A": ["CounterA1.jpg", "CounterA2.jpg"],
  "Counter B": ["CounterB1.jpg"],
  "Counter C": ["CounterC1.jpg"]
}


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

var object = {};


for (var key in Data) {
  var number = [object];

  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" onClick="updateObj(i);" class="success" value="' + d + '"><span class="slider round"> </span></label></li>'


    object[i++] = key + "," + d + "," + false;


  });


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


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


  console.log(number) // 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": "A", "Name": "CountA1.jpg", "IsActive":"Y" } , { "Counter": "A", "Name": "CountA2.jpg", "IsActive":"N" } , { "Counter": "B", "Name": "CountB1.jpg", "IsActive":"Y" }, { "Counter": "C", "Name": "CountC1.jpg", "IsActive":"Y" }]只是为了迭代所有单击的项目，因为在我的必需JSON中，我需要重复的对象，因为您可以检入在两个对象中有var i=0的必需数据，因为在我的UI中有2个用于计数器的复选框，该UI是动态的，我是根据JSON数据创建的，因此，任何Counter都可以在其中包含任意数量的复选框

Answer 1

如果您是动态创建UI，则可以从此类UI动态创建数据检索。

我已经提供了您需要的工作代码。但这不是答案。

尝试避免生成HTML .append(jq.html())，问题将更易于理解和解决。

var i = 0;

function updateObj(data) {
  //write your code to update your flag from false to true;
}
var Data = {
  "Counter A": ["CounterA1.jpg", "CounterA2.jpg"],
  "Counter B": ["CounterB1.jpg"],
  "Counter C": ["CounterC1.jpg"]
}


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

var object = {};

var elementsWithState = [];

for (let key in Data) if (Object.prototype.hasOwnProperty.call(Data, key)) {
  var newCard = $(`<div>
      <div class="card-header"></div>
      <ul class="list-group list-group-flush">
      </ul>
    </div>`
  );

  let ulFragment = document.createDocumentFragment();

  $(".card-header", newCard).text(key);

  Data[key].forEach(d => {
    let li = document.createElement('li');
    li.className = 'list-group-item';

    li.innerHTML = d + '<label class="switch"><input name="type" type="checkbox" onClick="updateObj(i);" class="success" value="' + d + '"><span class="slider round"> </span></label>';

    ulFragment.appendChild(li);

    let checkboxEl = li.querySelector('input[type="checkbox"]');

    elementsWithState.push({
      getState() {
        return {
          Counter: key,
          Name: d,
          IsActive: checkboxEl.checked ? 'Y' : 'N',
        };
      },
    });
  });


  $(".list-group", newCard).append(ulFragment);
  $(".card").append(newCard);
}
$("#btn").click(function() {
  let state = [];

  elementsWithState.forEach(({ getState }) => {
    state.push(getState());
  });

  console.log(state);
})

.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>

从用户界面创建所需数据时遇到问题

1 个答案: