Javascript - 如何选择多个文件并加载到 div 中

Question

我正在尝试使用按钮选择 4 个文件并将“One”加载到 div 中。 例如，如果我在哪里单击视频图标。仅将 video.php 加载到 div 容器中。如果我下一步单击 music.php，则将当前的 video.php 加载文件替换为新的 music.php 视频文件(这是为了切换提要内容)，例如音乐、图片、视频、状态等。 我目前有这个脚本:

注意:它可以工作，但是会加载每个文件。而不是一次一个。

$(document).ready(function() {
  $("#music").click(function() {
    $("#fload").load('music.php');
  });
  $("#video").click(function() {
    $("#fload").load('video.php');
  });
  $("#status").click(function() {
    $("#fload").load('status.php');
  });
  $("#picture").click(function() {
    $("#fload").load('picture.php');
  });
});

<div class="row Feed_Toggle_Row">
  <a href="#" id="video">
    <div class="col-md-3">
      <span class="glyphicon glyphicon-film"></span>	
    </div>
  </a>
  <a href="#" id="music">
    <div class="col-md-3">
      <span class="glyphicon glyphicon-music"></span>	
    </div>
  </a>
  <a href="#" id="status">
    <div class="col-md-3">
      <span class="glyphicon glyphicon-pencil"></span>	
    </div>
  </a>
  <a href="#" id="picture">
    <div class="col-md-3">
      <span class="glyphicon glyphicon-picture"></span>	
    </div>
  </a>
</div>


<div class="feedloadfull" id="fload"></div>

Answer 1

正如我在评论中所说，您可以使用 .empty() 来清除容器。您确实可以缩短此过程并提高效率:

$(document).ready(function() {
    $('.Feed_Toggle_Row').on('click', 'a', function(){ // handles all of the links within the class
        var whatWasClicked = this.id; // returns music, status, etc.
        var toLoad = whatWasClicked + '.php'; // create the name of the file
        $('#fload').empty(); // clear the div
        $('#fload').load(toLoad); // load it back up again
    });
});

引用 -

.empty()功能

.on()功能

<小时/>

如Roko C. Buljan指出，您还可以链接 jQuery 方法。例如你可以这样做:

$('#fload').empty().load(toLoad);

它将清空并一次性加载所有内容。