使用jquery動態向li元素添加類

Question

我正在嘗試使用jquery向某些li元素添加類“ block”，但未添加該類。 該程序將顯示時隙。 如果特定時間被阻止，則應將其禁用。 創建時隙的程序在這里

    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();
    }

在這里，我得到了阻塞的時隙，並將這些變量傳遞給視圖。

    $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);
}

這是我在隱藏輸入類型的情況下以$ blocks的形式發送塊並顯示時隙的視圖

          <?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.'"/>';
    }
}
?>

最后是在Jquery中將類添加到li元素以阻止特定的li元素

           $(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();
        });

這是生成的HTML輸出

                <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"/>

有沒有解決辦法？？？

Answer 1

您的ID無效，例如您有li-10:00-11:00 ， :分號）不能用於ID，請更改生成ID的方式

由於您需要時間，因此請將它們放在標記的data- *屬性中，然后使用jQuery的.data函數進行檢索。

生成類似HTML的代碼：

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

用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