Question

我想使用ajax

显示或隐藏数据div

这里我的代码用作脚本，但我想像在ajax中一样加载。

如果点击下一个按钮则显示下一个div。

然后点击上一个按钮显示上一个div。

我的脚本代码如下：

<script>
$('#next').click(function() {
$('.current').removeClass('current').hide()
    .next().show().addClass('current');
if ($('.current').hasClass('last')) {
    $('#next').attr('disabled', true);
}
$('#prev').attr('disabled', null);
});

$('#prev').click(function() {
$('.current').removeClass('current').hide()
    .prev().show().addClass('current');
if ($('.current').hasClass('first')) {
    $('#prev').attr('disabled', true);
}
$('#next').attr('disabled', null);
});
</script>

我的html代码如下：

<h1> QUESTIONS</h1>

<style>
#div{display:none;}
</style>
<button id="prev" disabled="disabled"> PREVIOUS </button>
<button id="next"> NEXT </button>

<form action="<?php echo site_url('pages/answers');?>" method="post">

<div id="main"> 
<?php $i=1; 
$tt=$ques->num_rows();
foreach($ques->result() as $qus)
{   ?>  
<div <?php if($i==1){?>id="div1" class="first current" <?php } else {?> id="div" <?php } if($i==$tt) {?> class="last"<?php }?>>
<input type="hidden" name="q_id[]" value="<?php echo $qus->qst_id; ?>"/> 
  <?php  echo $i.') ' .$qus->qst_questions;?>
   <label>  <input type="radio" name="<?php echo $qus->qst_id;?>" value="A"/><?php echo $qus->qst_option_a; ?></label>
   <label>  <input type="radio" name="<?php echo $qus->qst_id;?>" value="B"/><?php echo $qus->qst_option_b; ?></label>
   <label>  <input type="radio" name="<?php echo $qus->qst_id;?>" value="C"/><?php echo $qus->qst_option_c; ?></label>
   <label>  <input type="radio" name="<?php echo $qus->qst_id;?>" value="D"/><?php echo $qus->qst_option_d; ?></label>

</div>

<?php $i++; }?>
</div>

</form>

这里使用ajax显示/隐藏div。

怎么做？请帮助任何人解决我的问题。

这里以['plese see this']

为例

这是在脚本中加载但我想加载ajax

Answer 1

更新您的Javascript：更新AJAX的配置，它应该可以工作。

Demo

＆＃13;

$('#next').click(function() {
  $('.current').removeClass('current').hide()
    .next().show().addClass('current');
  if ($('.current').hasClass('last')) {
    $('#next').attr('disabled', true);
  }
  $('#prev').attr('disabled', null);
  $.ajax({
    url: "Url",
    success: function(result) {
      $('#main div:visible').html(result);

    },
    error: function(err) {
      console.log($('#main div:visible').attr('id'));
      $('#main div:visible').html('dynamic html content');
    }
  });

});

$('#prev').click(function() {
  $('.current').removeClass('current').hide()
    .prev().show().addClass('current');
  if ($('.current').hasClass('first')) {
    $('#prev').attr('disabled', true);
  }
  $('#next').attr('disabled', null);
  $.ajax({
    url: "Url",
    success: function(result) {
      $('#main div:visible').html(result);
    },
    error: function(err) {
      console.log($('#main div:visible').attr('id'));
      $('#main div:visible').html('dynamic html content');
    }
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<button id="prev" disabled="disabled">Prev</button>
<button id="next">Next</button>
<hr />
<div id="main">
  <div id="div1" class="first current">Div 1</div>
  <div id="div2">Div 2</div>
  <div id="div3" class="last">Div 3</div>
</div>

＆＃13;

Answer 2

$('#next').click(function() {
    $.ajax({url: "Url", 
            success: function(result){
         $('.current').removeClass('current').hide()
                .next().show().addClass('current');
            if ($('.current').hasClass('last')) {
                $('#next').attr('disabled', true);
            }
            $('#prev').attr('disabled', null);
    }});

});

$('#prev').click(function() {
    $.ajax({url: "Url", success: function(result){
 $('.current').removeClass('current').hide()
        .prev().show().addClass('current');
    if ($('.current').hasClass('first')) {
        $('#prev').attr('disabled', true);
    }
    $('#next').attr('disabled', null);
    }});

});

请在成功部分编写代码并且您可以从服务器端返回值将在'result'变量中到达此处您可以使用“结果”进行检查

这里我想在ajax hide show div中加载数据

2 个答案: