javascript - 如何用JSON数据设置Div内容

标签 javascript jquery html css

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

  • 我有一个选择选项，我正在填充我的 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>

关于 Employ 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 和 EmployA2.jpg 应该出现

最佳答案

您错误地使用了数组“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>

关于javascript - 如何用JSON数据设置Div内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56489463/

上一篇：javascript - 如何在大小取决于不同移动屏幕尺寸的 iFrame 中居中对齐内容？

下一篇：javascript - 使用 css 中的变换或其他一些高效的方式从圆创建长圆形

相关文章：

javascript - 悬停时显示内容

javascript - 每个和字符串索引

javascript - 获取所选内容的 html(源代码)索引？

javascript - 如何更改事件执行顺序？

javascript - ajax 加载成功响应并加载旋转

javascript - MooTools:更改元素文本，保持嵌套元素完好无损

html - 为什么流体背景 SVG 文件不能在所有尺寸下正确显示？

javascript - 同步时排除模型属性 (Backbone.js)

javascript - 在多个 HTML 元素上设置 CSS 属性

javascript - AJAX Post 线上的数据格式

©2024 IT工具网  联系我们