Question

[从概念上讲] 到目前为止我做了什么：用户将输入一个单词：let＆＃39; s say＆＃34; dog。＆＃34;点击＆＃34;提交＆＃34;按钮，页面将弹出一张狗图片和每只狗的信息表。

我希望做的事：如果用户决定搜索另一只动物，那么就说“猫”＃34;我希望我的狗图片全部被删除，并且基本上从新鲜开始。

这可以通过几行完成吗？这不是我的项目任务的一部分，但我确实注意到在测试我的网站时我只能搜索一次。在那之后，我认为它会再次调用所有内容，并且似乎会创建更多列（但是由于空间不足，您不会看到它们）。

我在想我是否可以检查我的div类=＆＃34;结果播放列表＆＃34;是空的，然后以某种方式我可以使用.empty（）或.remove（）重新开始。

这是一个片段（它不起作用，因为它只是为了显示我的代码的大纲）

＆＃13;

$(document).ready(
	if ($())
	// Query the soundcloud API when clicking the search button
	$('#searchButton').on('click', function() {
		var input = $('#input').val();
		$('#input').val('');
		callAPI(input);
		$('.results-playlist').append(
			'<div class="column" id="resultsContainer"><h2>Search Results</h2><div id="results-list"></div></div><div class="column" id="playlistContainer"><h2>My Playlist</h2><div id="play-list"></div></div>');
	}));

＆＃13;

<head>
  <title>HW 04 Advanced Javascrip and JQuery</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <header>
    <img id="main-logo" src="assets/soundcloud.png">
  </header>

  <section class="search">
    <input type="text" id="input" placeholder="Search for a song or artist">
    <button id="searchButton">Search</button>
  </section>

  <section>
    <div class="results-playlist">
    </div>
  </section>
</body>

<!-- <script type="text/javascript" src=“http://code.jquery.com/jquery-1.7.2.js“></script> -->
<script type="text/javascript" src="https://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="startercode_HW4_skeleton.js"> </script>
<script type=“text/javascript” src=“http://stratus.sc/stratus.js“></script>

＆＃13;

对不起，如果这个问题是以非常规的方式提出来的！我基本上有兴趣了解搜索引擎如何根据每个新用户输入更新搜索，并在此处建立一个非常基本的版本，如果它相对简单的话。谢谢！

Answer 1

如你所说，只需使用$('#searchButton').on('click', function() { var input = $('#input').val(); $('#input').val(''); callAPI(input); $('.results-playlist').empty().append( '<div class="column" id="resultsContainer"><h2>Search Results</h2><div id="results-list"></div></div><div class="column" id="playlistContainer"><h2>My Playlist</h2><div id="play-list"></div></div>'); }));。

{{1}}

如何根据用户输入更改页面内容？

1 个答案: