使用php的jQuery UI选项卡:使用foreach和current迭代

时间:2014-02-18 22:15:43

标签: php jquery jquery-ui jquery-ui-tabs

情境:我制作了一个脚本,它从数据库中读取数据并进行渲染,以便jQuery UI可以将其操作到标签中。

守则

function renderTabs(){

    $_db = array(
            'host' => MYSQL_HOST,
            'user' => MYSQL_USER,
            'password' => '',
            'database' => DB
        );

    $_channels = array(
        'chan1'     => 'db1',
        'chan2'     => 'db2',
        'chan3'     =>'db3',
        'chan4'     => 'db4'
    );

    $html = '';

    $conn = new mysqli($_db['host'],$_db['user'],$_db['password'],$_db['database']);

    $html .= '<div id="tabs">
                <ul>';

    foreach ($_channels as $i => $channel){

        while($chan = current($_channels)){
            echo $tab = array_search($chan,array_values($_channels));
            $html .= '<li><a href="#tabs-'.$tab.'">'.array_keys($_channels)[$tab].'</a></li>';
            next($_channels);}

        $html .= '</ul>';

        $n_tab = array_search($i,array_keys($_channels));

        $n_tab++;

        $results = $conn->query('SELECT * FROM table_test WHERE date BETWEEN (CURDATE() - INTERVAL 7 DAY) AND CURDATE() AND channel = \''.$channel.'\' GROUP BY id ORDER BY total DESC LIMIT 10');

        $html .= '<div id="tabs-'.$n_tab.'">
                  <table style="width:100%">
                  <tr><td>TEST</td>
                  <td>TEST COL1</td>
                  <td>TEST COL2</td>
                  <td>TEST COL3</td>
                  <td>TEST COL4</td></tr>';

        foreach($results as $row){

            $html .= '<tr><td><a href="'.$row['url'].'">'.$row['title'].'</a></td>
                    <td>'.$row['data1'].'</td>
                    <td>'.$row['data2'].'</td>
                    <td>'.$row['data3'].'</td>
                    <td>'.$row['data4'].'</td></tr>';
        }

        $html .= '</table></div>';

    }

    $html .= '</div>';

    return $html;

}

jQuery UI呈现标签所需的HTML结构:

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">tab1_title</a></li>
    <li><a href="#tabs-2">tab2_title</a></li>
    <li><a href="#tabs-3">tab3_title</a></li>
  </ul>
  <div id="tabs-1">
    <p>content1</p>
  </div>
  <div id="tabs-2">
    <p>content2</p>
  </div>
  <div id="tabs-3">
    <p>content3</p>
  </div>
</div>

问题:我有一个问题和一个疑问。问题是4个标签中只有3个被渲染(所有4个内容都被正确生成),我不知道为什么。

我也尝试过使用每个():

while($chan = each($_channels)){
  echo $chan[1];
  print_r(array_values($_channels));
  echo $tab = array_search($chan[1],array_values($_channels));
  $html .= '<li><a href="#tabs-'.$tab.'">'.array_keys($_channels)[$tab].'</a></li>';}

但无济于事。

怀疑:我做了以上尝试,以避免再次循环通过阵列,也因为我希望能够添加或删除选项卡(以及他们生成的内容)只有通过向$ _channels数组添加元素。是否有任何方便的方法来实现这一点,而不必迭代两次?

感谢你的支持。

编辑:我可能已经发现了问题,似乎foreach将$ _channels的内部指针移动了一个,这就是为什么current()循环返回3个元素而不是4个元素。 我知道reset(),但这里没用..

EDIT2 :这确实是一个PHP问题,手册说:

  

除非引用了数组,否则foreach将对指定数组的副本进行操作,而不是对数组本身进行操作。 foreach对数组指针有一些副作用。不要在foreach期间或之后依赖数组指针而不重置它。

那么,如何在不破坏其余代码的情况下重置指针呢?

2 个答案:

答案 0 :(得分:1)

要进行测试,但这可能对您有用:

诀窍是分割格式和数据收集。将你的2个部分分成2个数组,然后在你恢复完所有内容之后再完成整个部分。

function renderTabs(){

    $_db = array(
            'host' => MYSQL_HOST,
            'user' => MYSQL_USER,
            'password' => '',
            'database' => DB
        );

    $_channels = array(
        'chan1'     => 'db1',
        'chan2'     => 'db2',
        'chan3'     =>'db3',
        'chan4'     => 'db4'
    );

    $html = '';
    $ul = array();
    $tabs = array();
    $tab = 0;
    $conn = new mysqli($_db['host'],$_db['user'],$_db['password'],$_db['database']);


    foreach ($_channels as $i => $channel){
        $ul[] = '<li><a href="#tabs-'.++$tab.'">'.$channel.'</a></li>';

        $results = $conn->query('SELECT * FROM table_test WHERE date BETWEEN (CURDATE() - INTERVAL 7 DAY) AND CURDATE() AND channel = \''.$channel.'\' GROUP BY id ORDER BY total DESC LIMIT 10');

        foreach($results as $row){

            $tabs[] = '<div id="tabs-'.$tab.'">
                  <table style="width:100%">
                  <tr><td>TEST</td>
                  <td>TEST COL1</td>
                  <td>TEST COL2</td>
                  <td>TEST COL3</td>
                  <td>TEST COL4</td></tr>
                  <tr><td><a href="'.$row['url'].'">'.$row['title'].'</a></td>
                    <td>'.$row['data1'].'</td>
                    <td>'.$row['data2'].'</td>
                    <td>'.$row['data3'].'</td>
                    <td>'.$row['data4'].'</td></tr>
                </table></div>';
        }

    }

    $html .= '<div id="tabs">';
    $html .= "<ul>" . implode($ul). "</ul>";
    $html .= implode($tabs);
    $html .= '</div>';

    return $html;

}

答案 1 :(得分:0)

// Shortcode: [portfolio]
function create_portfolio_shortcode() {
    ob_start();
    echo '<div id="tabs">';
        $terms = get_terms('portfoliocategory');
        //$slug = wp_list_pluck( $terms, 'slug');
        if ( !empty( $terms ) && !is_wp_error( $terms ) ) {
            $i = 1;
            $ix = 1;
            echo '<ul>';
                foreach ( $terms as $term ) {
                    echo '<li><a href="#tabs-' . $i . '"> ' . $term->name . ' </a></li>';
                    $i++;
                }
            echo '</ul>';
            foreach ( $terms as $term ) {
            $a = 'args' . $ix;
            $a = array(
                'post_type' => 'portfolio',
                'post_status' => 'publish',
                'tax_query' => array(
                    array(
                        'taxonomy' => 'portfoliocategory',
                        'field'    => 'slug',  
                        'terms'    => $term->slug,
                    ),
                )
            );
            $q = 'query' . $ix;
            $q = new WP_Query($a);
            echo '<div id="tabs-' . $ix . '">';
                while ( $q->have_posts() ) { $q->the_post();        
                    the_title();
                wp_reset_postdata(); }
            echo '</div>';  
            $i++; $ix++; }  
        }
    echo '</div>';
    wp_reset_postdata();
    return ob_get_clean();
}

add_shortcode( 'portfolio', 'create_portfolio_shortcode' );
//Change Taxonomy name to yours