如何使用Ajax代碼點火器標籤

Question

我的代碼點火器網站有兩個帶單選按鈕的標籤。

當加載頁面顯示所有課程名稱時。我想做，當我點擊按鈕只顯示相關的課程名稱。怎麼做？

控制器

public function index(){ 
    $this->load->model('course_model'); 
    $course_data['course'] = $this->course_model->get_data(); 
    $this->load->view('ajaxtest', $course_data);  
} 

模型

class Course_model extends CI_Model { 
function get_data() { 
    $this->db->select('*'); 
    $query = $this->db->get('tble_course'); 
    if ($query->num_rows() > 0) { 
     return $query->result(); 
    } else { 
     return false; 
    } 
} 

查看

<div class="btn-group" data-toggle="buttons"> 
<label class="btn"> 
    <input type="radio" name="options" id="option1" autocomplete="off"> 
    <span>School</span> 
</label> 
<label class="btn"> 
    <input type="radio" name="options" id="option2" autocomplete="off"> 
    <span>University</span> 
</label><hr></div><div><?php 
    foreach ($course as $add) { 
     echo "<div>"; 
     echo "<p>" .$add->course_name. "</p>"; 
     echo "</div>"; 
    } 
?></div><script type="text/javascript"></script> 

Answer 1

使用下面的代碼。 您必須將邏輯添加到您提供的類別課程中。

學校 大學

---

<div> 





<?php 
//Looping course's 
      foreach ($course as $add) { 
       // check if current course is related to school, or universty 
       $dynamic_class = 'school_course'; // if related to school add (school_course) class 
       $dynamic_class = 'uni_course'; // if related to universty add (uni_course) class 
       echo "<div class=".$dynamic_class.">"; 
       echo "<p>" .$add->course_name. "</p>"; 
       echo "</div>"; 
      } 
     ?> 
     </div> 

的腳本根據選擇的單選按鈕，顯示隱藏的課程。

<script type="text/javascript"> 
    $(function(){ 
     $('.toggle_course').click(function(){ 
      if($(this).val() == 'school') { 
       $('.school_course').fadeIn(); 
       $('.uni_course').fadeOut(); 
      }else{ 
       $('.uni_course').fadeIn(); 
       $('.school_course').fadeOut(); 
      } 
     }); 
    }); 
</script>