Question

我正在尝试在ajax进程中仅为已单击的元素显示和隐藏加载程序映像。

这是我的HTML

<table>
    <tbody>
        <tr>
            <td class="status-item">
                <!-- element to show/hide -->
                <i id="1" title="" rel="tooltip" class="cursor help fa fa-envelope read" data-original-title="Read"></i>

                <!-- element to show/hide -->
                <span style="display:none" class="loader">
                    <img width="24" height="24" alt="loader" src="http://localhost/atlas-dev/application/modules/admin/assets/img/loader.gif">
                </span>
            </td>
            <td class="status-item">
                <!-- element to click -->
                <i id="2" title="" rel="tooltip" class="cursor help fa fa-envelope unread" data-original-title="Unread"></i>

                <!-- element to show/hide -->
                <span style="display:none" class="loader">
                    <img width="24" height="24" alt="loader" src="http://localhost/atlas-dev/application/modules/admin/assets/img/loader.gif">
                </span>
            </td>
        </tr>
    </tbody>
</table>

JS代码

// when click on read icon
$('.read').click(function() {
    var id = $(this).attr('id');
    var url = base_url + 'admin/notifications/unseen/' + id;
    $('.loader').show();
    $.ajax({
        type: 'POST',
        url: url,
        success: function() {
            $('span.loader').hide();
        }
    });
});

// when click on unread icon
$('.unread').click(function() {
    var id = $(this).attr('id');
    var url = base_url + 'admin/notifications/unseen/' + id;
    $('.loader').show();
    $.ajax({
        type: 'POST',
        url: url,
        success: function() {
            $('span.loader').hide();
        }
    });
});

我尝试了$(this).next()但是没有工作，甚至停止显示/隐藏加载程序图像

$('.read').click(function() {

    var id = $(this).attr('id');
    var url = base_url + 'admin/notifications/unseen/' + id;
    $(this).next('span.loader').show();
    $.ajax({
        type: 'POST',
        url: url,
        success: function() {
            $(this).next('span.loader').hide();
        }
    });
});

$('.unread').click(function() {

    var id = $(this).attr('id');
    var url = base_url + 'admin/notifications/seen/' + id;
    $(this).next('span.loader').show();
    $.ajax({
        type: 'POST',
        url: url,
        success: function() {
            $(this).next('span.loader').hide();
        }
    });
});

如果只显示了元素（图标）的加载器图像，那么如何解决这个问题？

Answer 1

对this使用不同的变量，因为它在success callback中不起作用，

var $this=$(this);
$.ajax({
    type: 'POST',
    url: url,
    success: function() {
        $this.next('span.loader').hide();// use $this here not $(this)     
    }
});

可以使用一种简单的方法来完成，例如在<i>标记中添加数据类型属性，

<强> HTML

<i id="1" data-type="seen" data-original-title="Read" ...
......
<i id="2" data-type="unseen" data-original-title="Unread" ...

在脚本中试试这个，

$('.read, .unread').click(function() {    
    var id = this.id,// use this.id simply
        $this=$(this), // take a copy of current jquery object
        type=$this.data('type');// seen/unseen see above html
    var url = base_url + 'admin/notifications/'+type+'/' + id;
    $this.next('span.loader').show();
    $.ajax({
        type: 'POST',url: url,data:{id:id},
        success: function() {
            $this.next('span.loader').hide();
        }
    });
});

Answer 2

试试这个：

// when click on read icon
$('.read').click(function() {
   var current = $(this);
   var id = $(this).attr('id');
   var url = base_url + 'admin/notifications/unseen/' + id;
   current.parent().find('.loader').show();
   $.ajax({
       type: 'POST',
       url: url,
       success: function() {
           current.parent().find('.loader').hide();
       }
   });
});
// when click on unread icon
$('.unread').click(function() {
   var current = $(this);
   var id = $(this).attr('id');
   var url = base_url + 'admin/notifications/unseen/' + id;
   current.parent().find('.loader').show();
   $.ajax({
       type: 'POST',
       url: url,
       success: function() {
           current.parent().find('.loader').hide();
       }
   });
});

jquery显示隐藏加载器的单击元素

2 个答案: