Question

我尝试使用4个文件的按钮选择并加载＆＃34; One＆＃34;成为一个div。例如，如果我在哪里点击视频图标。仅将video.php加载到div容器中。如果我在下一步点击music.php，请用新的music.php视频文件（这是切换Feed内容）替换当前video.php加载的文件，例如音乐，图片，视频，状态等。我目前有这个脚本：

注意：它可以工作，但是将每个文件加载到彼此之上。而不是一次一个。

＆＃13;

$(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');
  });
});

＆＃13;

<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>

＆＃13;

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);

将一下子全部清空并加载。

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

1 个答案: