我正在制作一款允许用户列出电影的应用。我有我的Javascript工作,但它只是让我添加一个项目。如何更改它以便我可以添加多个输入以进行发布?
在我的HTML中:
<!DOCTYPE html>
<html>
<link rel="stylesheet" text="text/css" href="movies.css">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<title>Hello World</title>
</head>
<body>
<h1>My Favorite Movies</h1>
<input type="text" id="movie" placeholder="Movie">
<button id="enter">Enter</button>
<div id="list">Chosen Films:</div>
<script type="text/javascript" src="movies.js"></script>
</body>
和我的Javascript:
$("#enter").click(
function() {
var movie = $("#movie").val();
var list = (movie);
$('#list').html(list);
});
答案 0 :(得分:0)
您需要将列表存储在点击处理程序之外。
@section header {
@{Html.RenderAction("Header", "Home", new { section = "Cake" })}
}
此外,列表中的文字也会被覆盖:
var list = [];
$("#enter").click(
function() {
var movie = $("#movie").val();
list.push(movie);
$('#list').html(list);
});
答案 1 :(得分:0)
<div class="col-sm-4 col-xs-6 col-land-4 "><p class="text-center">
<?= Html::a('<img class="img-responsive center-block" src="@web/images/conbuttscreen.png"
alt="Find Concierge Services" /><strong>CONCIERGE<br/>SERVICES</strong><br/>', ['consearch.php']) ?>
</p></div>
jQuery函数用值替换整个DIV内容。尝试使用.html()
或.append()
jQuery函数将内容添加到DIV。
假设您正逐一进入电影。
.prepend()
$("#enter").click(
function() {
var movie = $("#movie").val();
var list = (movie);
$('#list').append('<p>' + list + '</p>');
});
p { background-color: lightgrey; margin: 1px; padding-left: 5px; color: blue; }
答案 2 :(得分:0)
您需要一个全局javascript变量,该变量不在您创建的函数范围内,以跟踪项目列表。
看看:http://www.w3schools.com/js/js_arrays.asp
每次添加电影时,都会将该对象添加到此全局数组中,然后您需要使用数组值更新列表html。
答案 3 :(得分:0)
您目前正在使用新内容替换内容,而应添加新内容。在列表div中添加一个新的div,如下所示:
<div id="list">Chosen Films:<div id="mylist"></div></div>
然后将您的商品附加到其中。
$('#mylist').append(list);