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>

如何使用Ajax代码点火器标签

1 个答案: