Question

我有一个可以播放或暂停的广告系列。目前我实现了暂停ajax功能，我也需要创建游戏。但是当我点击暂停时，我想用play one替换pause元素。

所以我与fontawesome图标有这个链接：

<a href="#" class="pauseCampaign" id="{{$campaign->id}}" data-toggle="tooltip" title="Pause campaign" style="float: right; padding: 5px"><i class="fa fa-pause-circle-o fa-2x" aria-hidden="true"></i></a>

和Ajax调用：

$(document).on('click','.pauseCampaign',function(){

  var idCampaign=$(this).attr('id');

      $.ajax({
         type:'get',
         url:'/pauseCampaign',
         data:{idCampaign: idCampaign},
         success:function(msg){
           console.log(msg)
         }
      });

 });

此功能将DB中的字段从1更新为0 ...

如何使用ajax

替换暂停播放按钮

<a href="#" class="playCampaign" id="{{$campaign->id}}" data-toggle="tooltip" title="Resume campaign" style="float: right; padding: 5px"><i class="fa fa-play-circle fa-2x" aria-hidden="true"></i></a>

脚本相同，而不是url:'/pauseCampaign',它将是url:'/playCampaign',

Answer 1

默认情况下，您可以按display:none

隐藏播放按钮

<a href="#" class="playCampaign" data-id="{{$campaign->id}}" data-toggle="tooltip" title="Resume campaign" style="display: none;float: right; padding: 5px"><i class="fa fa-play-circle fa-2x" aria-hidden="true"></i></a>

并通过jquery .show（）方法显示它。

$('.pauseCampaign').hide();
$('.playCampaign').show();

如果您有多个按钮，请尝试使用您的代码：

$(document).on('click','.pauseCampaign',function(){

  var idCampaign=$(this).attr('data-id');

      $.ajax({
         type:'get',
         url:'/pauseCampaign',
         data:{idCampaign: idCampaign},
         success:function(msg){
           $(this).hide();
           $('#'+idCampaign).show();
         }
      });
 });

将playCampaign标记上的id更改为data-id，然后按data-id获取。

Answer 2

只需使用jQuery选择器即可实现此目的。

<div id="myContainer">
</div>
<button class="pauseCampaign">pause</button>
<button class="startCampaign">start</button>

JS：

var idCampaign=$(this).attr('id');
$(document).on('click','.pauseCampaign',function(){
  $.ajax({
     type:'get',
     url:'/pauseCampaign',
     data:{idCampaign: idCampaign},
     success:function(msg){
       $('#myContainer').html('<a href="#" class="playCampaign" id="{{$campaign->id}}" data-toggle="tooltip" title="Resume campaign" style="float: right; padding: 5px"><i class="fa fa-play-circle fa-2x" aria-hidden="true"></i></a>')
     }
  });

});
}

$(document).on('click','.startCampaign',function(){
 $.ajax({
     type:'get',
     url:'/startCampaign',
     data:{idCampaign: idCampaign},
     success:function(msg){
       $('#myContainer').html('<a href="#" class="pauseCampaign" id="{{$campaign->id}}" data-toggle="tooltip" title="Pause campaign" style="float: right; padding: 5px"><i class="fa fa-pause-circle-o fa-2x" aria-hidden="true"></i></a>')
     }
  });

});

这将通过单击按钮（一旦ajax成功）设置容器div的内部HTML。

问候

Answer 3

有很多方法可以做到这一点。一种可能的方法是将两个按钮放在一个公共容器中。然后，您可以在success ajax回调中的父容器上添加/删除一个类，然后使用一些CSS隐藏其中一个按钮。

var $wrapper = $('.wrapper');

$('.playCampaign').click(function() {
  // Trigger AJAX Call and after success:
  $wrapper.addClass('playing');

})

$('.pauseCampaign').click(function() {
  // Trigger AJAX Call and after success:
  $wrapper.removeClass('playing');

})

.wrapper .playCampaign {
  display: block;
}

.wrapper .pauseCampaign {
  display: none;
}

.wrapper.playing .playCampaign {
  display: none;
}

.wrapper.playing .pauseCampaign {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<h4>Demo</h4>
<div class="wrapper">
  <a href="#" class="playCampaign" id="campaign-1" data-toggle="tooltip" title="Resume campaign" style="float: right; padding: 5px"><i class="fa fa-play-circle fa-2x" aria-hidden="true"></i></a>
  <a href="#" class="pauseCampaign" id="campaign-2" data-toggle="tooltip" title="Pause campaign" style="float: right; padding: 5px"><i class="fa fa-pause-circle-o fa-2x" aria-hidden="true"></i></a>
</div>

播放/暂停切换onclick - Ajax

3 个答案: