如何循环卡？ （包含卡片中的所有元素）

Question

我想问一些关于循环卡片的问题。(https://ibb.co/WpxghNg) 当我循环卡片时，卡片可以循环，而其中的元素不能。所有元素都不起作用，无法打开/关闭。

当我循环卡片时，卡片可以循环，而其中的元素不能。所有元素都不起作用，无法打开/关闭。

这是 sql farm_node (https://ibb.co/S304TyQ)

elseif($_POST['p']=="show_node"){
    $sn=$_POST['sn'];
    $q=mysqli_query($link, "SELECT node from farm_node WHERE SN=\"$sn\"");
        while($d = mysqli_fetch_row($q)){
            $node[]=$d[0];
        }
        $daftar=array('node'=>$node);
        echo json_encode($daftar);     
    }

$("#newval").change(function() {
  sn = $("option:selected").attr('sn');
  namafarm = $("option:selected").val();
  isi = $("#show_siram2");
  if (namafarm == "1") {
    console.log("value 1")
    console.log(sn)
    $("#bungkus_siram").empty();
    $("#show_hidro").show();

  } else {
    console.log("value 2")
    console.log(sn)
    $("#show_hidro").hide();
    $("#bungkus_siram").empty();

    $.ajax({
        method: "POST",
        url: "../inc/olah.php",
        data: {
          p: "show_node",
          'sn': sn,
        },
        dataType: "json"
      })
      .done(function(d) {

        var html = '<div class="card mx-auto" style="width:350px" >';
        html += '<div class="card-body">';
        html += '<form id="form_node" >';
        html += '<div class="custom-control custom-switch" style="margin-left:60px;">';
        html += '<input type="checkbox" class="custom-control-input" id="pompa">';
        html += '<label class="custom-control-label" for="pompa">Pompa</label>';
        html += '</div>';
        html += '</form>';
        html += '<h5 class="card-title"></h5>';
        html += '<button type="submit" name="nama"class="data-farm btn btn-success btn-sm" id="farm">Set Node</button>';
        html += '</div>';
        html += '</div>';

        jml = d.node.length;
        var isi = $("#form");
        var node = d.node;
        for (var i = 0; i < jml; i++)
        //$("#form").show();
        {
          isi = $("#show_siram2");
          $("#field").append(html);
          $('#field #field .custom-control .custom-switch:eq(' + i + ')').val(node[i]);
          $('#field .card-title:eq(' + i + ')').append(node[i]);
          $("#field .data-farm:eq(" + i + ")").val(node[i]);
          console.log(node[i]);
        }



      })

  }
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group ">
				<label for="serial-number">Serial Number:</label>
					<select class="serial-number form-control" name="serial-number" class="custom-select mb-3" id="newval">
						<option>Serial Number</option>
			<?php
			$q=mysqli_query($link,"SELECT produk.SN, produk.nama, produk.produk FROM produk LEFT JOIN farm ON produk.SN=farm.SN WHERE username=\"$_SESSION[username]\"");
			while($d=mysqli_fetch_row($q)) {
			echo "<option value=$d[2] sn=$d[0]>$d[1]</option>";
			}
			
			?>
					</select>
			</div>
<div class="form-group" id="field">
<div class="row" id="bungkus_siram" style="display:block">

  <div class="card" id="show_siram1">
    <div class="card-body">
      <h5 class="card-title">Node X</h5>
      <form id="form_node">
        <div class="custom-control custom-switch" style="margin-left:80px;">
          <input type="checkbox" class="custom-control-input" id="pompa">
          <label class="custom-control-label" for="pompa">Pompa</label>
        </div>
        <label for="k_max">Kelembapan Maksimum</label>
        <input type="range" class="custom-range" id="k_max" name="k_max">
        <label for="k_min">Kelembapan Minimum</label>
        <input type="range" class="custom-range" id="k_min" name="k_min">

        <button type="submit" name="nama" class="data-farm btn btn-success btn-sm" id="farm">Set Node</button>
    </div>
    <div class="form-group">
      <button type="submit" id="save_addPlant" class="btn btn-primary btn-success">Save</button>
      <button type="button" class="btn btn-outline-danger pull-left" data-dismiss="modal">Close</button>
    </div>
    </form>
  </div>

  <div class="card" id="show_siram2">
    <div class="card-body">
      <h5 class="card-title">Node X</h5>
      <form id="form_node">
        <div class="custom-control custom-switch" style="margin-left:60px;">
          <input type="checkbox" class="custom-control-input" id="pompa">
          <label class="custom-control-label" for="pompa">Pompa</label>
        </div>
        <label for="k_max">Kelembapan Maksimum</label>
        <input type="range" class="custom-range" id="k_max" name="k_max">
        <label for="k_min">Kelembapan Minimum</label>
        <input type="range" class="custom-range" id="k_min" name="k_min">

        <button type="submit" name="nama" class="data-farm btn btn-success btn-sm" id="farm">Set Node</button>
    </div>
    <div class="form-group">
      <button type="submit" id="save_addPlant" class="btn btn-primary btn-success">Save</button>
      <button type="button" class="btn btn-outline-danger pull-left" data-dismiss="modal">Close</button>
    </div>
    </form>
  </div>
</div>
</div>
</div>

我要尽可能多的循环卡片及其内容。

Answer 1

您的意思是 --- 卡片可以循环，而其中的元素不能。所有元素都不起作用，无法打开/关闭。

你的意思是什么都没有在浏览器上显示任何东西吗？

因为我注意到了，在你的父 div 上。它有这样的风格

<div class="row" id="bungkus_siram" style="display:none">

也许您将样式更改为- display:block 显示？ 我猜。