Question

我有一个搜索输入#submit，一旦提交了ISBN，淡入，就会显示结果（来自Google Books Api）。然后我有一个按钮'添加到库'#add - 这通过Ajax成功地将信息添加到我的数据库中，并且淡出 div，到目前为止都很好。

然而，当我输入另一个ISBN并单击#submit时 - 没有任何内容出现。 div仍然隐藏（或淡出）。在淡出后，如何将div“重置”为默认设置？我每次要搜索时都必须手动刷新页面。

我很可能做一些非常愚蠢的事情，因为我是JS的新手，但是非常感谢任何帮助/方向。我一直在看 jQuery fadeToggle（）方法 - 这是正确的吗？

我的代码

$(document).ready(function() {
    $('#submit').click(function(ev) {
        ev.preventDefault();

        $.getJSON(url,function(data){
            $("#add").prop('disabled', false);
            $.each(data.items, function(entryIndex, entry){
                var html = '<div class="results well">';   
                html += '<h3>' + ( entry.volumeInfo.title || '' )+ '</h3>';  
                html += '<hr><button id="add" name="add">add to library</button>';
                $(html).hide().appendTo(".result").fadeIn(1000);

                $('#add').click(function(ev) {
                    ev.preventDefault();

                    $.ajax({
                        type: 'POST',
                        url: 'addIsbnScript.php',
                        data: {
                            'isbn' : isbn,
                            'title' : entry.volumeInfo.title
                        },
                        success: function () { //when form has been submitted successfully do below
                            $('.result').fadeOut(1000); //fade out the results div
                        }//end success function
                    });//end ajax
                });//end add button funct 
            });//end of each function
        });//end getJSON
    });// end submit.click
});//end

Answer 1

更改

$('.result').fadeOut(1000);

到

$('.results').fadeOut(1000);

不要为每个添加按钮使用相同的ID，因为您要添加多个按钮。所以<button id="add" ...>在第二次出版后并不是唯一的。添加按钮ID应与click事件处理程序的选择器匹配。例如：

$(document).ready(function() {
     var addID = 1;

     $('#submit').click(function(ev) {
         ev.preventDefault();

         $.getJSON(url,function(data){
             $("#add").prop('disabled', false);
             $.each(data.items, function(entryIndex, entry){
                 var html = '';   

                 addID++;
                 html += '<div class="results well">';
                 html += '<h3>' + ( entry.volumeInfo.title || '' )+ '</h3>';  
                 html += '<hr><button id="add'+addID+'" name="add">add to library</button>';
                 $(html).hide().appendTo(".result").fadeIn(1000);

                 $('#add'+addID).click(function(ev) {
...

Answer 2

success = function() {
    $('.result').fadeOut(1000, function() {
      $('.result').show();
    });
};

你无法中途停止动画。即。在淡出动画完成之前，你不能调用show（）。

JavaScript淡入/淡出Div

2 个答案: