使用jquery删除和获取html元素时遇到问题

Having troubles with removing and reapearing html elements with jquery

本文关键字：元素 遇到 问题 html 获取 jquery 删除 使用      更新时间：2023-09-26

基本上我想向下滑动一个元素，然后当再次按下按钮时，我希望它向上滑动，清空div，然后向下滑动，得到新的结果。这么长时间以来，我一直在想如何做到这一点，但我似乎无法让它与jquery一起工作。

$(".search").on("click",function(){
    $('.results').slideUp(500).empty().append("<p>Results</p>").hide().slideDown(500)
});

我知道这是我的项目特有的，但我确实觉得其他人可能会发现这个有用的

我不确定您的问题到底是什么，但我认为您的示例中没有显示slideUp动画。

slideUp方法接受第二个参数，即函数回调。当slideUp操作完成时调用它。如果您在这个回调函数中执行其余操作，则保证在slideUp之后执行。

jQuery('#testbutton').on('click',function() {
  $('#testlist').slideUp(500, function() {
    $('#testlist').empty().append("<li>this is a test</li>").slideDown(500);
  });  
});

你可以在这里找到一个完整的工作示例：

https://jsfiddle.net/dxyybwyh/5/

我想滑下一个元素，然后当再次按下按钮时，我希望它向上滑动，清空div，然后使用new向下滑动后果

对我来说似乎很简单

如果你还需要，请告诉我

$('#myButton').click(function () {
  if ( $( ".myDiv" ).is( ":hidden" ) ) {
    //show the div
    $( ".myDiv" ).slideDown( "slow" );
    //add content
    $( ".myDiv" ).html("New Content")
  } else {
    //hide the div
    $( ".myDiv" ).slideUp( "slow" );
    //clear content
    $( ".myDiv" ).html("");
  }
});

http://codepen.io/Rohithzr/pen/jqmGXg

更新了具有附加功能和更可读性的笔

$('#myButton').click(function () {
  if ( $( ".myDiv" ).is( ":hidden" ) ) {
    show();
  } else {
    hide();
    clearContent();
    appendContent("New Content");
  }
});
function clearContent(){
  //clear content
  $( ".myDiv" ).html("");
}
function appendContent(content){
  $( ".myDiv" ).html($( ".myDiv" ).html()+content);
}
function hide(){
  //hide the div
  $( ".myDiv" ).slideUp( "slow" );
}
function show(){
  //show the div
  $( ".myDiv" ).slideDown( "slow" );
}
相关文章：