0

jquery を使用して特定の li 要素にクラス「ブロック」を追加しようとしていますが、クラスが追加されません。プログラムは、タイムスロットを表示することです。特定の時間がブロックされている場合は、無効にする必要があります。タイムスロットを作成するプログラムはこちら

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

最後に、クラスを li 要素に追加して特定の li 要素をブロックする Jquery を次に示します。

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

修正はありますか？

4

1 に答える 1

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
于 2013-08-01T16:44:29.353 に答える