Question

这里的想法是从Select下拉按钮提交单击值，php从MySQL保存到 json编码变量中检索记录，其中我使用jQuery访问每条记录，将每一条记录显示为模态模态显示下一条记录前30秒。

我有表单工作，php调用MySQL，我有所有数据的json变量。我有一个bootstrap Modal，它会显示标题，但不会显示记录的主体，我只想显示其中的2个字段 - ＆＃34; name＆＃34;和＆＃34;描述＆＃34;。我甚至可以看到带有#name id的p元素中的模态体中的所有记录，当我点击inspect时，但只是不会进入模态。

<?php
require_once('../admin/login.php');
$conn = login();

if(isset($_POST['type'])) {
  $type = $_POST['type'];
  $query = ("select * from exercise where type = '$type'");
  $result = $conn->query($query);
  $row = $result->fetch_all(MYSQLI_ASSOC);
}
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="exercise.css">
    <title>Workout App</title>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container-fluid">
        <h1>Workout App</h1>
        <form action="" method="post" class="form-inline">
            <Select NAME="type" class="custom-select">
                <Option selected disabled>Choose exercise</Option>
                <Option VALUE="cardio">Cardio</Option>
                <Option VALUE="circuit">Circuit</Option>
                <Option VALUE="abs">Abs</Option>
                <Option VALUE="stretch">Stretch</Option>
            </Select>
            <input type="submit" class="btn btn-primary">
        </form>
        <button id="restart" class="btn btn-primary">Restart</button>
        <button id="pause" class="btn btn-primary">Pause</button>
        <button id="start" class="btn btn-primary">Start</button>
        <div id="progress">
          <div id="bar"></div>
        </div>
        <div id="info"></div>
        <?php 
            if(isset($row)){
              echo "<h2>".ucwords($type)."</h2>";
              echo "<button type='button' id='begin' class='btn btn-primary'>Begin</button><br>";
            }
        ?>
        <div class="modal fade" id="myModal" role="dialog">
            <div class="modal-dialog">

                <!-- Modal content-->
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">Exercise</h4>
                    </div>
                    <div class="modal-body">
                        <p id="name"></p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                </div>

            </div>
        </div>    

    </div>    
<script>
$( "#begin" ).click(function() {
  var jqueryarray = <?php echo json_encode($row); ?>;
    $.each(jqueryarray, function(idx, obj){ 
        $.each(obj, function(key, value){
            if (key == 'name' || key == 'description')
            $("#name").append(key + ": " + value + "<br>");
            $('#myModal').modal('show');
        });
    });
});
</script>
<script src="exercise.js"></script>
</body>
</html>

jQuery在向#name追加JSON时起作用，如下所示。我遇到的问题是模态没有显示数据。

<div class="modal-body">
  <p id="name">name: standard crunch<br>
  description: arms behind head, interlocked thumbs support neck, chin off chest, eyes on ceiling, knees bent then raise head and chest off floor<br> 
  name: left side crunch<br>
  description: standard crunch with knees laid all the way over to the right side<br>
  name: right side crunch<br>
  description: standard crunch with knees laid all the way over to the left side<br>
  name: superman crunch<br>
  description: toe touches with legs straight in the air and body in l formation reach out with arms straight up to touch toes<br>
  </p>
</div>

这是解析JSON后的变量

var jqueryarray = [{"id":"22","name":"standard crunch","description":"arms behind head, interlocked thumbs support neck, chin off chest, eyes on ceiling, knees bent then raise head and chest off floor","type":"abs","group":"1"},{"id":"23","name":"left side crunch","description":"standard crunch with knees laid all the way over to the right side","type":"abs","group":"2"},{"id":"24","name":"right side crunch","description":"standard crunch with knees laid all the way over to the left side","type":"abs","group":"3"},{"id":"25","name":"elbows to knees","description":"crunch with palms over head almost like pulling your head forward trying to bring elbows to knees with legs crossed off the ground parallel to the ground","type":"abs","group":"4"},{"id":"26","name":"superman crunch","description":"toe touches with legs straight in the air and body in l formation reach out with arms straight up to touch toes","type":"abs","group":"5"},{"id":"27","name":"leg lifts","description":"hands under back with feet 6 inches off ground then raise and lower never dropping below the starting point","type":"abs","group":"6"},{"id":"28","name":"in and outs","description":"hands behind head, feet in leg lift position, raise head and chest off floor and keep it there, then pull knees in to chest","type":"abs","group":"7"},{"id":"29","name":"hip rock","description":"hands behind head, feet together, legs bent forming diamond, and lift hips off ground while keeping upper body off floor","type":"abs","group":"8"},{"id":"30","name":"bicycle","description":"hands behind head, feet off the ground, knees bent, bringing elbow cross body to knee and alternating, kicking out like bicycle","type":"abs","group":"9"},{"id":"31","name":"full body crunch","description":"elbows in air w palms by ears, thrusting forward so elbows end up by your side raising upper body while extended legs have been pulled and knees tucked up towards your chest","type":"abs","group":"10"}];

添加图像以显示空模态体：

无法使用Bootstrap Modal显示每条JSON记录

0 个答案: