如何在php頁面多次使用相同的onclick函數？

我做了一個.php頁面，它從mysql中檢索數據，並在每個記錄上逐一顯示它.php頁面。但實際的問題是，當我點擊鏈接它顯示div，反之亦然，但只適用於第1行。我知道onclick函數是獨一無二的，所以它會調用一次。所以，我用.querySelector（），而不是.getElementById（）。因爲while循環裏面的全部內容都是來自數據庫的，所以id是不會起作用的.Ok，最後來點，我稱之爲介紹和特性鏈接（用於第1行和第2行）相同的onclick函數。（「搜索到多的解決方案，但什麼也沒發生」）如何在php頁面多次使用相同的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。

來源

2016-07-29 John120

所以，你需要看看你的行選擇該行中的類。 – epascarello

只需要在相同的鏈接點擊顯示相同的div。但是，如何？請任何解決方案。！ – John120

@epascarello但是如何？ – John120

直列事件是一個壞主意，只是使用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 
    }); 
});

來源

2016-07-29 13:11:39 epascarello

是的，我嘗試你的代碼，但在鏈接上點擊沒有happanes！爲什麼？ – John120

您是否準備好了文檔？我更新了它，以包括文檔準備 – epascarello

它也像一個魅力感謝@epascarello。但我有點困惑哪個解決方案好。 – John120

好，相貌醜陋，但應該工作

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

來源

2016-07-29 13:11:24 k102

其完整的代碼或我不明白這一點！ – John120

您可以將Document.querySelector()爲唯一的類名拜指向$userrow['id']：

的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; ?>

來源

2016-07-29 13:17:15

因爲「$ id」，它的作品總是獨一無二的，它總是以不同的方式標識onclick事件。謝謝@YosvelQuintero – John120

如何在php頁面多次使用相同的onclick函數？

回答

相關問題