Question

我创建了一个.php页面，它从mysql中检索数据并在每个记录上逐个简单地显示在.php页面上。但实际的问题是，当我点击链接时，它显示div，反之亦然但是，仅适用于第1行。我知道onclick功能是唯一的，因此，它将调用一次。所以，我用.querySelector（）代替.getElementById（）。因为while循环中的整个内容来自数据库所以，id不能正常工作.Ok，最后说到了怎么样，我为引入和功能链接（第1行和第2行）调用相同的onclick函数。（＆＃34;搜索到很多解决方案但没有任何反应和＃34;）

我的javascript代码：

<head>
 <script>
  function ShowIntroduction() 
  {
    document.querySelector(".IntroductionDiv").style.display = 'block';
    document.querySelector(".FeaturesDiv").style.display = 'none';
  }
  function ShowFeatures() 
  {
    document.querySelector(".IntroductionDiv").style.display = 'none';
    document.querySelector(".FeaturesDiv").style.display = 'block';
  }
 </script>
</head>

我的PHP代码：

<body>
  <?php
   error_reporting(E_ALL ^ E_DEPRECATED);
   ob_start();
   define('DB_SERVER', 'localhost');
   define('DB_USERNAME', 'root');
   define('DB_PASSWORD', '');
   define('DB_DATABASE', 'sldb');
    $connection = mysql_connect(DB_SERVER, DB_USERNAME, DB_PASSWORD) or die(mysql_error());
    $database = mysql_select_db(DB_DATABASE) or die(mysql_error());
    $select=mysql_query("SELECT * FROM products_page");
    $num = mysql_num_rows($select);

while($userrow=mysql_fetch_array($select))
{
  $id=$userrow['id'];     
  $userintroduction=$userrow['introduction'];
  $userfeatures=$userrow['features'];

echo '
  <div class="MainOuterDiv" style="border:1px solid transparent;">
    <div class="DetailsCircleBtnDiv" >
        <a href="#" onClick="ShowIntroduction();"> Introduction </a>
        <a href="#" onClick="ShowFeatures();" style="margin-left:10px"> Features </a>
    </div> <!--- End of DetailsCircleBtnDiv ----->
    </br>

    <div class="DetailsTextDiv">
        <div class="FeaturesDiv" style="border:1px solid black;">
            <p class="Products-Features-P" >'.$userfeatures.'</p>
        </div></br>
        <div class="IntroductionDiv" style="border:1px solid black;">
            <p id="demo" class="Products-Introductio-P" >'.$userintroduction.'</p>
        </div></br>
    </div> <!--- End of DetailsTextDiv ----->
   </div> <!--- End of MainOuterDiv ----->
   </br>';
}
?>

</body>

当我点击第1行的介绍/功能链接工作正常但是，当使用第2行的介绍/功能链接时，它适用于第1行的介绍div和功能div。

Answer 1

内联事件是一个坏主意，只需使用jQuery，因为列出了

将类添加到锚点

Format('#n%2.2n', FloatToStr(SUM(<fdsDataSet."Data1">-<fdsDataSet."Data2">)))

听取点击

<a href="#" class="anchorShow"> Introduction </a>

Answer 2

嗯，看起来很难看，但是应该工作

  function ShowFeatures(evt) 
  {
    evt.target.parentNode.parentNode.querySelector(".IntroductionDiv")...

Answer 3

由于$userrow['id']，您可以将Document.querySelector()指向一个唯一的班级名称：

JavaScript的：

function ShowIntroduction(id) {
    document.querySelector('.IntroductionDiv' + id).style.display = 'block';
    document.querySelector('.FeaturesDiv' + id).style.display = 'none';
}

function ShowFeatures(id) {
    document.querySelector('.IntroductionDiv' + id).style.display = 'none';
    document.querySelector('.FeaturesDiv' + id).style.display = 'block';
}

PHP：

<?php while($userrow=mysql_fetch_array($select)) : ?>
    <div class="MainOuterDiv" style="border:1px solid transparent;">
        <div class="DetailsCircleBtnDiv" >
            <a href="#" onClick="ShowIntroduction(<?php echo $userrow['id'] ?>);"> Introduction </a>
            <a href="#" onClick="ShowFeatures(<?php echo $userrow['id'] ?>);" style="margin-left:10px"> Features </a>
        </div> <!--- End of DetailsCircleBtnDiv -->
        </br>

        <div class="DetailsTextDiv">
            <div class="FeaturesDiv<?php echo $userrow['id'] ?>" style="border:1px solid black;">
                <p class="Products-Features-P" ><?php echo $userrow['features'] ?></p>
            </div></br>
            <div class="IntroductionDiv<?php echo $userrow['id'] ?>" style="border:1px solid black;">
                <p id="demo" class="Products-Introductio-P" ><?php echo $userrow['introduction'] ?></p>
            </div></br>
        </div> <!--- End of DetailsTextDiv -->
    </div> <!--- End of MainOuterDiv -->
    </br>
<?php endwhile; ?>

如何在php页面中多次使用相同的onclick函数？

3 个答案: