javascript - 如何根据按钮单击时输入字段中存在的数字创建 div，仅一次

标签 javascript jquery html css angularjs

我想做的是如下:

  1. 点击按钮时从 json 文件中获取数据。
  2. 在单独的框中显示数据，数组的每个元素都不同。例如，如果我的 json 给我 3 行数据，则应该有 3 个框。
  3. 将方框放置在 2X2 的网格中。
  4. 与这张图片完全一样Wireframe for foodcourts

第 1 步我轻松实现了。我还可以在单​​击按钮时生成框，但不是如图所示。此外，每次单击按钮时，它都会添加到 div。我真的很感激一些帮助。这是我的代码:

   <!doctype html>
<html ng-app="myApp">
  <head>
    <meta charset="utf-8">
    <title>Untitled Document
    </title>
  </head>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
  </script>
  <style>
    .shape{
      text-align:center;
      background-image:url(dark-triangles.png);
      width:200px;
      height:60px;
      line-height:60px;
      color:white;
      margin:10px;
      position:relative;
      transition-property: background;
      transition-duration: -10s;
      transition-timing-function: linear;
    }
    .shape:before{
      content:"";
      width:0px;
      height:0px;
      border-top:60px solid rgba(107,255,55,105);
      border-left:60px solid transparent;
      position:absolute;
      right:0%;
      top:0px;
    }
    .shape:hover{
      background: #ff7b29;
      cursor: pointer;
    }
    body {
      font-family: "Lato", sans-serif;
    }
    .sidenav {
      height: 100%;
      width: 250px;
      position: fixed;
      z-index: 1;
      top: 0;
      left: 0;
      background-image: url("doodles.png");
      background-color: #cccccc;
      overflow-x: hidden;
      transition: 0.5s;
      padding-top: 60px;
    }
    /*.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;
    }*/
    /*.sidenav a:hover, .offcanvas a:focus{
    color: #f1f1f1;
    }*/
    /*.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
    }*/
    /*@media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
    }*/
    .div1
    {
      width:400px;
      height:auto;
      background:none;
      margin:auto;
      border:2px solid black;
      margin-top:70px;
    }
    .divcontent
    {
      width:auto;
      height:auto;
      background:none;
      margin:auto;
      border:2px solid black;
      margin-top:70px;
    }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
  </script>
  <body ng-controller="myController" background="cloudy-day.png" style="color:black;">
    <div id="mySidenav" class="sidenav">
      <!--  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>!-->
      <input value={{len}}>
      </input>
    <button class="shape" id="orders" >
      Orders
      <button class="shape" id="users">
        Users
        <button class="shape" ng-click="fcclicked()">
          Food Courts
          <button class="shape">
            Delivery Locations
            </div>
          <div class="div1"; id="d1">
            <p align="center">Click one of the buttons to load content.....
            </p>
            <div ng-repeat="x in names">
              {{ x.id}} 
              {{ x.name }}
              {{ x.address }}
            </div>  
            <!--             <script language="javascript">
function cdiv()
{
/*  var nums=document.getElementById();
var div = document.createElement("div");
div.style.width = "100px";
div.style.height = "100px";
div.style.background = "red";
div.style.color = "white";
div.innerHTML = "Hello";
div.style.display="inline-block";
div.style.margin="10px";
document.getElementById("d1").appendChild(div);*/
}
</script>!-->
          </div>
          <script>
            angular.module('myApp', [])
              .controller('myController', function($scope,$http) {
              $scope.fcclicked= function(){
                alert("hiii");
                $http.get('http:/18.220.71.157:8080/foodcourt/foodcourt/list')
                  .success(function(response) {
                  $scope.names = response.foodCourts;
                  $scope.len=response.foodCourts.length;
                  //var newEle = angular.element("<table class='square'></div>");
                  //var target = document.getElementById('d1');
                  //angular.element(target).append(newEle);
                  /*for( i =1 ; i <$scope.len ;i++){
                        var newEle = angular.element("<div class='square' id='myddiv'></div>");
                         angular.element(target).append(newEle);
                         }*/
                }
                          );
              }
            }
                         );
          </script>
          <style>
            .square {
              width: 100px;
              height: 100px;
              background: red;
              display:inline-block;
              margin:10px;
            }
          </style>
          <!--<script>
$(document).ready(function(){
$(document).click(function(e){  
if(e.target.id=="orders")
{   
//$("#d1").append('');
}
if(e.target.id=="users")
{   
}
// $("#d1").fadeIn();
//$("#div2").fadeIn("slow");
//$("#div3").fadeIn(3000);
});
});
</script>
<!--<script>
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
</script>!-->
          <style>
            .minidiv
            {
            }
          </style>
          </body>
        </html>

最佳答案

好吧，有很多问题

  • 样式标签应该始终在头部
  • 按钮必须关闭<button></button>
  • 输入标签应该像这样关闭<input />
  • 脚本标签最好位于标题或底部 正文

我修复了一些样式以使 div float ，因此您可以拥有与您想要的相同的想法，现在您可以根据需要修改代码:

    angular.module('myApp', [])
      .controller('myController', function($scope, $http) {
        $scope.fcclicked = function() {
          alert("hiii");
          $http.get('http:/18.220.71.157:8080/foodcourt/foodcourt/list')
            .success(function(response) {
              $scope.names = response.foodCourts;
              $scope.len = response.foodCourts.length;
            });
        };
      })
.shape {
    text-align: center;
    background-image: url(dark-triangles.png);
    width: 200px;
    height: 60px;
    line-height: 60px;
    color: white;
    margin: 10px;
    position: relative;
    transition-property: background;
    transition-duration: -10s;
    transition-timing-function: linear;
  }
  
  .shape:before {
    content: "";
    width: 0px;
    height: 0px;
    border-top: 60px solid rgba(107, 255, 55, 105);
    border-left: 60px solid transparent;
    position: absolute;
    right: 0%;
    top: 0px;
  }
  
  .shape:hover {
    background: #ff7b29;
    cursor: pointer;
  }
  
  body {
    font-family: "Lato", sans-serif;
    box-sizing: border-box;
  }
  
  .sidenav {
    height: 100%;
    width: 250px;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-image: url("doodles.png");
    background-color: #cccccc;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
  }
  
  .div1 {
    box-sizing: border-box;
    width: 400px;
    height: auto;
    background: none;
    margin: auto;
    border: 2px solid black;
    margin-top: 70px;
    overflow: hidden;
  }
  
  .divcontent {
    width: auto;
    height: auto;
    background: none;
    margin: auto;
    border: 2px solid black;
    margin-top: 70px;
  }
  
  .square {
    box-sizing: border-box;
    width: 48%;
    height: 100px;
    background: red;
    display: inline-block;
    margin: 1%;
    float: left;
    padding: 10px;
  }
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!doctype html>
<html ng-app="myApp">

<head>
  <meta charset="utf-8">
  <title>Untitled Document
  </title>
</head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>

<body ng-controller="myController" background="cloudy-day.png" style="color:black;">
  <div id="mySidenav" class="sidenav">
    <input value={{len}} />
    <button class="shape" id="orders">Orders</button>
    <button class="shape" id="users">Users</button>
    <button class="shape" ng-click="fcclicked()">Food Courts</button>
    <button class="shape">Delivery Locations</button>
  </div>
  <div class="div1" id="d1">
    <p align="center">Click one of the buttons to load content.....
    </p>
    <div class="square" ng-repeat="x in names">
      {{ x.id}} {{ x.name }} {{ x.address }}
    </div>
  </div>
</body>

</html>

关于javascript - 如何根据按钮单击时输入字段中存在的数字创建 div，仅一次，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45956653/

上一篇：javascript - 如何使轮播和滚动动画在单个网页上协同工作

下一篇：php - 无法使用 xPath + PHP 将 HTML 节点的 outerHTML 存储到变量中

相关文章：

javascript - 如何将 Jitsi Meet 添加到 Vuejs

jquery - 在 jQuery Nice 表单中更改背景

javascript - 如何使用 Javascript/jQuery 和不区分大小写的文本或搜索字段动态显示/隐藏 div(在 KeyUp、iTunes 风格上)

javascript - jQuery 比较 3 个元素并添加最大的大小

javascript - 如何在 javascript 中检测某个字段是否处于焦点并清除除此之外的错误？

javascript - JQuery 动画队列永不停止

javascript - 延迟加载图像 - noscript 后备代码

javascript - 带有 jQ​​uery : 100% height, 图像/子项自动宽度的水平 slider

javascript - 使用 js-hotkeys jQuery 插件监听 'anykey'

html - 通过 CSS 将元素显示为预格式化文本

©2024 IT工具网  联系我们