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

【问题标题】：How to use same onclick function multiple times in php page?如何在php页面中多次使用相同的onclick函数？
【发布时间】：2016-07-29 13:03:35
【问题描述】：

我制作了一个 .php 页面，该页面从 mysql 检索数据并将其显示在该 .php 页面上，每个记录都简单地一一记录。但实际的问题是，当我点击链接时，它显示 div，反之亦然，但仅适用于第 1 行。我知道 onclick 函数是独一无二的，所以它会调用一次。所以，我使用 .querySelector() 代替 .getElementById()。因为 while 循环中的全部内容都来自数据库，所以 id 不能正常工作。好吧，终于说到点子上了，我为介绍和功能链接（对于第 1 行和第 2 行）调用相同的 onclick 函数。（“搜索了很多解决方案，但没有任何反应”）

我的 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。

【问题讨论】：

所以您需要查看您所在的行并从该行中选择类。
只是我想在同一个链接点击时显示同一个 div。但是，如何？请提供任何解决方案。 !
@epascarello 但如何？
如果我猜对了，当你点击一个项目时，你想显示“介绍”并隐藏“功能”。反之亦然。是这样吗？
但这里无法使用 id 所以我正在使用类 @JeffreyTroost 你有任何演示，请代码对我有帮助。

标签： javascript php jquery html mysql

【解决方案1】：

内联事件是个坏主意，只要使用 jQuery，因为你已经列出了它

将类添加到锚点

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

聆听点击

$( function () {  //wait for document to be ready
    $(".anchorShow").on("click", function (evt) {  //bind the click event to the anchors
        evt.preventDefault();  //stop click
        var anchor = $(this);  //link that was clicked
        var wrapper = anchor.closest(".MainOuterDiv");  //parent element that wraps content
        wrapper.find(".IntroductionDiv").show();  //show intro
        wrapper.find(".FeaturesDiv").hide();      //hide features
    });
});

【讨论】：

是的，我尝试了您的代码，但在链接上单击没有任何问题！为什么？
您准备好在文件上绑定了吗？我更新了它以包含准备好的文档
感谢@epascarello，它也很有魅力。但我有点困惑哪种解决方案好。
我不是 ids 的粉丝，但是如果你想要很多 ids，你可以很容易地生成它们并将它们粘贴到你的文档中。

【解决方案2】：

好吧，看起来很丑，但应该可以工作

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

【讨论】：

它的完整代码或我不明白的东西！

【解决方案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; ?>

【讨论】：

它的作品很棒，因为“$id”总是唯一的，并且它总是以不同的方式识别 onclick 事件。谢谢@YosvelQuintero