Question

我有一个数组的JSON对象，我要做的是动态填充div

我有一个select option，我在其中填写了JSON数据的所有键
在我的JSON中，每个键都有一个数据数组作为其值，我试图将这些值添加到其他div上，但这不起作用

代码

$(document).ready(function() {
  var ImageData = {
    "Employ A": [
      "EmployA1.jpg",
      "EmployA2.jpg"
    ],
    "Employ B": [
      "EmployeB1.jpg"
    ],
    "Employ C": [
      "EmployeC1.jpg"
    ]
  }
  var CountersName = Object.keys(ImageData)

  let dropdown = $("#counterNames")
  dropdown.append('<option selected="true" disabled>Select Counter</option>');
  for (var i = 0; i < CountersName.length; i++) {
    $('<option/>').val(CountersName[i]).html(CountersName[i]).appendTo('#counterNames');
  }
  $("#counterNames").on('change', function() {

    var value = $(this).val();

    $(".card-header").text(value) //setting card header 
    console.log(ImageData.value) // this shows undefinded on console
    $(".list-group-item").text(ImageData.value)


  })

});

.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-4">
    <label for="counterNames">Select Counter:</label>
    <select class="form-control" id="counterNames">
    </select>

    <div class="card" style="margin: 50px 0">

      <div class="card-header"></div>

      <ul class="list-group list-group-flush">

        <li class="list-group-item"><label class="switch "> <input type="checkbox" class="success">
								<span class="slider round"></span>
						</label>
        </li>

      </ul>
    </div>
  </div>
</div>

在变更工作select field 时，我正在尝试实现以下目标

.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-md-6">
    <div class="card" style="margin: 50px 0">

      <div class="card-header">Employ A</div>

      <ul class="list-group list-group-flush">

        <li class="list-group-item ">EmployA1.jpg <label class="switch "> <input type="checkbox" class="success">
								<span class="slider round"></span>
						</label>
        </li>
        <li class="list-group-item ">EmployA2.jpg <label class="switch "> <input type="checkbox" class="success">
								<span class="slider round"></span>
						</label>
        </li>

      </ul>
    </div>
  </div>
</div>

我尝试了以下代码

Object.keys(ImageData).forEach(function (k) {
                ImageData[k].forEach(function (d) {
                    console.log(d) 
                 });

            });

但是当我从选择字段中选择任何下拉列表时，它正在打印所有类似EmployA1.jpg,EmployA2.jpg,EmployB1.jpg,Employc1.jpg的值。我试图做的是当我选择EmployA然后EmployA1.jpg and EmployA2.jpg时

Answer 1

您错误地使用了数组'ImageData'的索引。写ImageData ['value']而不是ImageData.value。

此外，在您输入错误的代码之后，我的意思是：

  $(".list-group-item").text(ImageData.value)

如果要显示图像名称列表，请使用以下代码：

$(document).ready(function() {
  var ImageData = {
    "Employ A": [
      "EmployA1.jpg",
      "EmployA2.jpg"
    ],
    "Employ B": [
      "EmployeB1.jpg"
    ],
    "Employ C": [
      "EmployeC1.jpg"
    ]
  }
  var CountersName = Object.keys(ImageData)

  let dropdown = $("#counterNames")
  dropdown.append('<option selected="true" disabled>Select Counter</option>');
  for (var i = 0; i < CountersName.length; i++) {
    $('<option/>').val(CountersName[i]).html(CountersName[i]).appendTo('#counterNames');
  }
  $("#counterNames").on('change', function() {

    var value = $(this).val();

    $(".card-header").text(value); //setting card header 
    console.log(ImageData[value]) ;// this shows undefinded on console
   //  $(".list-group-item").text(ImageData[value])
   var ul = document.getElementById(".list-group");
   ul_innerhtml = "";
    for (i=0; i < ImageData[value].length; i++) {
    	title = ImageData[value][i];
    	 var ul_innerhtml = ul_innerhtml+'<li class="list-group-item">'+title+'<label class="switch "><input type="checkbox" class="success"><span class="slider round"> </span></label></li>';
    }
    $(".list-group").html(ul_innerhtml);
    
  })

});

.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%;
}

<!DOCTYPE html>
<html>
<head>
	<title></title>
		<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">

</head>

<body>

<div class="container">
  <div class="col-xs-12 col-sm-12 col-md-6 col-lg-4">
    <label for="counterNames">Select Counter:</label>
    <select class="form-control" id="counterNames">
    </select>

    <div class="card" style="margin: 50px 0">

      <div class="card-header"></div>

      <ul class="list-group list-group-flush">

        <li class="list-group-item">
        	<label class="switch "> 
        		<input type="checkbox" class="success">
        		<span class="slider round">
        		</span>
        	</label>
        </li>

      </ul>
    </div>
  </div>
</div>

</body>
</html>

如何使用JSON数据设置Div内容

1 个答案: