Question

我有一点隐藏和显示表的问题。我尝试了这个，我在控制台上没有错误，但它确实有效。也许我忘记了错误或犯了错误。

我在代码中看到了数据，但是当我点击链接时它就会出现。

谢谢

      $i = 0;

      foreach($option_attributes_name as $value) {
         $content .= '    <li class="col-md-12"><a onclick="showTabOption' . $i .'" class="nav-link" data-toggle="tooltip" data-target="#section_ProductsAttributesNewApp_content" href="' . OSCOM::link('index.php?A&Catalog\Products&Edit&cPath=' . $_GET['cPath'] . '&pID=' .  $_GET['pID'] . '#tab-option' . $i) . '"><i class="fa fa-minus-circle"></i> ' . $value['name'] . '</a></li>';
        //        $i++;
        $t++;
      }

      $Qoption = $this->app->db->prepare('select option_id, type
                                          from :table_test_products_options_attributes');
      $Qoption->execute();

      $i =0;
      while ($Qoption->fetch()) {

      $content .= '<div id="tab-option' . $i . '" style="display:none;">';
      $content .= '<h4>' . $Qoption->value('type') . '</h4>';
      $content .= '<table width="100%" cellpadding="5" cellspacing="0" border="0">
                    </table>
                    </div>
                ';
        $content .= '
<script type="text/javascript"><!--   
    function showTabOption' . $i . '() {
      $("a[href=\'#tab-option' .$i . '\']").parent().remove();
      $(\'#tab-option'. $i . '\').remove(); 
      $(\'#option a:first\').div(\'show\');
    }
//--></script>  
        ';
        $i++;
      }

Answer 1

您可以通过调整js和jquery使用方式来解决一些问题。

1）仅使用class和data-tableid设置要点击的元素：

$content .= '<li class="col-md-12"><a class="showTabOption nav-link" data-tableid="'. $i .'" ... etc etc ...</a>';
                                             ^^^^^^^^^^^^^           ^^^^^^^^^^^^^^^^^^^^

2）在第一个循环中修复此问题：将$t++;更改为$i++;。

3）您不需要调整表构建（来自while循环的构建）：

$content .= '<div id="tab-option'. $i .'" style="display:none;">';// this is ok

4）然后调整你的SINGLE javascript函数。让它输出while循环的OUTSIDE（因为这只能执行一次）：

<script language="Javascript" type="text/javascript">
$( document ).ready(function() {
    $(".showTabOption").click(function(e) {
        e.preventDefault();                    // stop the a href from firing off
        var tableid = $(this).data('tableid'); // the table in question
        $(this).parent().remove();             // remove what you clicked?
        $("#tab-option"+ tableid ).show();     // show your options table
    });
});
</script>

当你点击其中一个链接时，这会让你继续制作那个表（它周围的div）。当然，看起来你在那里有更多的事情，表行，href链接值和排序，但你只询问显示表格div。

TL; DR：调整后的示例代码的完整示例：

<?php
    $i = 0;
    foreach($option_attributes_name as $value) {
        $content .= '<li class="col-md-12"><a class="showTabOption nav-link" data-tableid="'. $i .'" data-toggle="tooltip" data-target="#section_ProductsAttributesNewApp_content" href="'. OSCOM::link('index.php?A&Catalog\Products&Edit&cPath='. $_GET['cPath'] .'&pID='.  $_GET['pID'] .'#tab-option'. $i) .'"><i class="fa fa-minus-circle"></i> '. $value['name'] .'</a></li>';
        $i++;
    }
    $Qoption = $this->app->db->prepare('select option_id, type
                                        from :table_test_products_options_attributes');
    $Qoption->execute();
    $i = 0;
    while ($Qoption->fetch()) {
        $content .= '<div id="tab-option'. $i .'" style="display:none;">';
        $content .= '<h4>'. $Qoption->value('type') .'</h4>';
        $content .= '<table width="100%" cellpadding="5" cellspacing="0" border="0">';
        // table tr rows go here
        $content .= '</table>';
        $content .= '</div>';
        $i++;
    }
?>

<script language="Javascript" type="text/javascript">
$( document ).ready(function() {
    $(".showTabOption").click(function(e) {
        e.preventDefault();                    // stop the a href from firing off
        var tableid = $(this).data('tableid'); // the table in question
        $(this).parent().remove();             // remove what you clicked?
        $("#tab-option"+ tableid ).show();     // show your options table
    });
});
</script>

用javascript隐藏/显示表格

1 个答案: