PHPページで同じonclick関数を複数回使用する方法は？

mysqlからデータを取得し、その.phpページに各レコードを1つずつ表示する.phpページを作成します。実際の問題は、クリックリンクでdivを表示し、その逆の場合でも、行1でのみ動作します。私はonclick関数が一意であることを知っていますので、一度呼び出されます。だから、代わりに.querySelector（）を使用しました.getElementById（）。紹介と機能のリンク（行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

インラインイベントはあなたはそれがアンカー

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

にクラスを追加します

上場持っているので、ただのjQueryを使用し、悪い考えです動作するはずですクリックを聞く

$(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

はい、私はあなたのコードを試してみませんか？どうして？ – John120

文書にバインドしましたか？私はそれをドキュメントの準備が含まれて更新 – epascarello

その魅力のようにも@epascarello感謝のように動作します。しかし、私はちょっと混乱しています。 – John120

まあ、醜いに見えますが、

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

出典

2016-07-29 13:11:24 k102

その完全なコードまたは何か私はこれを理解していない！ – John120

あなたはユニークなクラス名に$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; ?>

出典

2016-07-29 13:17:15

"$ id"のために素晴らしい作品は常にユニークで、それはonclickイベントを常に異なって識別します。ありがとう@YosvelQuintero – John120

PHPページで同じonclick関数を複数回使用する方法は？

答えて

関連する問題