javascript - 如何在 html javascript 中使用这段代码?克隆()

标签 javascript jquery html clone

我找到了这段代码(示例 https://jsfiddle.net/uxo27cq0/ )

function displaytickets(){
		var $panel = $('<div/>').addClass('col-xs-3 panel panel-default')
    $panel.append($('<div><h3 class="panel-title">Title</h3></div>').addClass('panel-heading'))
    $panel.append($('<div>Panel content</div>').addClass('panel-body'));
    $('body').append($panel);
    
  	// let's assume your ajax returns 4 tickets
    var data = {
    	'tickets' : [
      	{'description' : 'Description_1', 'status': 'Status_1', 'subject': 'Subject_1' },
      	{'description' : 'Description_2', 'status': 'Status_2', 'subject': 'Subject_2' },
      	{'description' : 'Description_3', 'status': 'Status_3', 'subject': 'Subject_3' },
      	{'description' : 'Description_4', 'status': 'Status_4', 'subject': 'Subject_4' }
      ]
    };
    
    for (i = 0; i < data.tickets.length; i++) {
    	var new_panel = $panel.clone(); // note the use of .clone()
      new_panel.find('.panel-title').text(data.tickets[i].subject);
      new_panel.find('.panel-body').text(data.tickets[i].description);
      $('body').append(new_panel);
		}
}

displaytickets();
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

我不知道如何通过以下方式使其在 html 中工作:

<html>
<style>
</style>
<body>

// div here

<script type="text/javascript">

// i put the code here

</script>
</body>
</html>

显然它不起作用,所以,如果有人能告诉我它应该如何,它将完全解决我的问题

谢谢!!!

最佳答案

<html>
<head>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head> 
<style>
</style>
<body>

// div here
</body>
<script type="text/javascript">

function displaytickets() {
    var $panel = $('<div/>').addClass('col-xs-3 panel panel-default')
                 $panel.append($('<div><h3 class="panel-title">Title</h3></div>').addClass('panel-heading'))
                 $panel.append($('<div>Panel content</div>').addClass('panel-body'));
$('body').append($panel);

  	// let's assume your ajax returns 4 tickets
     var data = {
	'tickets' : [
  	{'description' : 'Description_1', 'status': 'Status_1', 'subject': 'Subject_1' },
  	{'description' : 'Description_2', 'status': 'Status_2', 'subject': 'Subject_2' },
  	{'description' : 'Description_3', 'status': 'Status_3', 'subject': 'Subject_3' },
  	{'description' : 'Description_4', 'status': 'Status_4', 'subject': 'Subject_4' }
     ]
};

for (i = 0; i < data.tickets.length; i++) {
	var new_panel = $panel.clone(); // note the use of .clone()
  new_panel.find('.panel-title').text(data.tickets[i].subject);
  new_panel.find('.panel-body').text(data.tickets[i].description);
  $('body').append(new_panel);
	}
}

displaytickets();

</script>

</html>

关于javascript - 如何在 html javascript 中使用这段代码?克隆(),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54548091/

相关文章:

javascript - 两条不同路线的通用过滤器

javascript - firebase auth - 获取当前提供者 javascript

javascript - 使用 jquery 按值进行选择验证

javascript - 在 Javascript 模拟时钟中使用时刻时区

javascript - 有人可以解释一下定义 jQuery 插件时语法的含义吗?

javascript - 使用 scrollTop 制作动画

javascript - 粒子js无法正常工作

javascript - chrome 设置的不透明度未按预期一致渲染

javascript - 仅显示一个 div 并使用索引隐藏其余部分

html - CSS 使 div 在顶部和底部 flex 但在左侧和右侧笔直