douliwang6896
2013-08-01 16:38
浏览 156
已采纳

使用jquery动态地向li元素添加类

I am trying to add a class 'block' to certain li elements using jquery but the class is not getting added. The program is to show the time slots. if the certain time is blocked then it should be disabled. the program to create the time slots is here

    public function __construct(){
        $this->_meta['instance']='time';
        $this->_meta['class']='time';
    }

    private function _selectbox($start,$end,$currentTime=false,$id=false,$name=false,$class=false){

        $fromtime=$start;
        $totime= $fromtime + "1";
        $select = '<ul class="'.$class.'">';
        for($i=$start;$i<=$end;$i++){
            while($fromtime<$end){
            $li='<li id="li-'.$fromtime.':00-'.$totime.':00" class="" style="width:24%;"><input type="radio"  id="radio-'.$fromtime.':00-'.$totime.':00" name="'.$name.'" value="'.$fromtime.':00-'.$totime.':00"/>'.$fromtime.':00-'.$totime.':00</li>';
            $select.=$li;
            $fromtime=$fromtime + "1";
            $totime=$totime + "1";

            }
        }

        return $select;
    } 
        public function show($meta=array()){        
        $this->_meta=array_merge($this->_meta,$meta);   
        return $this->_hour();
    }

here i'm getting the blocked time slots and passing those variables to views.

    $date = $_SESSION['date'];
    $blocks = $block->getBlocksPerDay(date('d',strtotime($date)),
                                      date('m',strtotime($date)),
                                      date('Y',strtotime($date)));

    $this->setData('blocks',$blocks);
    $this->setData('date',$date);


         public function getBlocksPerDay($day,$month,$year){
    $connection = db::factory('mysql');

    $sql = 'select *  from blocks WHERE date LIKE "'.$year.'-'.$month.'-'.$day.'%"';

    return $connection->getArray($sql);
}

Here is the view in which i'm sending the blocks as $blocks in input type hidden and also showing the time slots

          <?php echo $time->show(array('instance'=>'from'));?>

            <?php 
if(sizeof($blocks)>0){
    foreach($blocks as $block){
        $time_from=explode(":",$block['time_from']);
        $time_from_part1=$time_from[0];
        $time_from_part2=$time_from[1];
        $time_to=explode(":",$block['time_to']);
        $time_to_part1=$time_to['0'];
        $time_to_part2=$time_to['1'];
        //echo $time_from_part1':'$time_from_part2'-'$time_to_part1':'$time_to_part2;
        echo '<input type="hidden" class="blocks" disabled="disabled" value="'.$time_from_part1.':'.$time_from_part2.'-'.$time_to_part1.':'.$time_to_part2.'"/>';
    }
}
?>

And Lastly here is the Jquery to add the class to li element to block the particular li element

           $(document).ready(function() {   
             function setBlocks(){ 
    var blocks = $('.blocks');
    $.each(blocks,function(index,value){
        $('#li-'+$(value).val()).addClass('block');
        //$('#li-'+$(value).val()).find('input').remove();
    });
}
setBlocks();
        });

Here is the HTML Output Generated

                <ul class="time"><li id="li-10:00-11:00" class="" style="width:24%;"><input type="radio"  id="radio-10:00-11:00" name="from-time-hour" value="10:00-11:00"/>10:00-11:00</li><li id="li-11:00-12:00" class="" style="width:24%;"><input type="radio"  id="radio-11:00-12:00" name="from-time-hour" value="11:00-12:00"/>11:00-12:00</li><li id="li-12:00-13:00" class="" style="width:24%;"><input type="radio"  id="radio-12:00-13:00" name="from-time-hour" value="12:00-13:00"/>12:00-13:00</li><li id="li-13:00-14:00" class="" style="width:24%;"><input type="radio"  id="radio-13:00-14:00" name="from-time-hour" value="13:00-14:00"/>13:00-14:00</li><li id="li-14:00-15:00" class="" style="width:24%;"><input type="radio"  id="radio-14:00-15:00" name="from-time-hour" value="14:00-15:00"/>14:00-15:00</li><li id="li-15:00-16:00" class="" style="width:24%;"><input type="radio"  id="radio-15:00-16:00" name="from-time-hour" value="15:00-16:00"/>15:00-16:00</li><li id="li-16:00-17:00" class="" style="width:24%;"><input type="radio"  id="radio-16:00-17:00" name="from-time-hour" value="16:00-17:00"/>16:00-17:00</li><li id="li-17:00-18:00" class="" style="width:24%;"><input type="radio"  id="radio-17:00-18:00" name="from-time-hour" value="17:00-18:00"/>17:00-18:00</li>

              <input type="hidden" class="blocks" disabled="disabled" value="10:00-11:00"/>

Is there any fix???

  • 写回答
  • 好问题 提建议
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • dongya6395 2013-08-01 16:44
    已采纳

    Your id's are invalid, for instance you have li-10:00-11:00, : (semicolons) cant be used for id's, change the way you generate your id's

    since you need the times put them in the data-* attributes of the tag, and use jQuery's .data function to retrieve it.

    Generate HTML Like:

    <li id="someUniqueId" data-time="10:00-11:00" class="" style="width:24%;">
    

    In Javascript

    var time = jQuery("#someUniqueId").data("time");
    //Now "time" will contain "10:00-11:00"
    console.log(time);
    //console.log will display time in console
    
    已采纳该答案
    评论
    解决 无用
    打赏 举报

相关推荐 更多相似问题