0

私の問題が何であるかをよりよく説明するために編集してください：

  • ページ 1 をコンテンツとする Div があります。
  • ページ 1 には、div のコンテンツをページ 2 に変更するボタンがあります。
  • ページ 2 には、div のコンテンツをページ 1 に変更するボタンがあります。

問題: ページ 1 が最初に読み込まれると、ボタンは何もしません。ページ 2 が最初にロードされた場合、ボタンはコンテンツをページ 1 に変更します。さらに、ページ 1 のボタンは機能します (ページ 1 がページ 2 の前にロードされた場合は機能しません!これは私の問題です!)。

私は数学のトレーニングツールを開発しようとしています。実際には、次の動作の理由がわからないため、最初は失敗しているようです。

質問: ページを最初に間違った順序でロードした場合にのみ機能するのはなぜですか?

ここにページ: MathTrainer 投稿の下部にあるページ コード。

私がしようとしていること:

選択ページを div にロードしました。この Div には、php-include が設定されています。ボタンを押すと、div の内容が実際のトレーニング ツールに変更されます。つまり、「質問」-「オプション 1」-「オプション 2」などです。同じ方法で選択に戻るためのボタンと一緒に。

この変更は、送信ボタンからの「onclick」を介して処理され、JS で関数を呼び出しています。すなわち：

$("#trainercontent").load('trainerAbfrage.php');

何が起こるのですか：

何も、..送信機能によるページのリロード以外は何もないようです。div-content は変更されていません。

この予期しない動作の原因は何ですか?

機能しないこととは別に、最初にトレーニングツールを含め、そこにあるボタンを使用して選択に戻ろうとしました（明らかに最初に表示されるはずです）。そして、それは機能します。また、ページのエンコーディングを「ISO」にすると機能し、UTF-8に切り替えると機能しなくなりました。エンコーディングは私のページをこのように台無しにするべきではありませんよね?

これをさらに予想外にしているのは何ですか？

最初にトレーナーページを含める場合は、戻るボタンを使用して選択ページに移動し、「開始」ボタンを押しても機能します! これはまったく同じコードで、同じファイルがロードされているため、本当に混乱しました。表示された最初のページではないのに、なぜ機能するのですか?

私がデバッグしようとしたもの:

  1. php-include を削除し、ロードされたページの javafunction に置き換えて、php が問題に関係しているかどうかを確認しました。同じ動作。選択が最初に表示されている場合はトレーナーに切り替えることはできませんが、トレーナーが最初に表示されている場合は背中合わせに切り替えることができます。
  2. ISOエンコーディングに戻しましたが、うまくいきませんでした。
  3. 次に、ファイル構造を変更しようとしました（知っていますが、実際にはアイデアが不足しています）。そのため、すべてのファイルがサーバー上の同じフォルダーにあります。同じ動作。

コード、メインページ:

<!doctype html>
<html lang="de">
<head>
        <!-- Titel der Webseite -->
        <title>Mathematik - Definitions-Trainer</title>

        <!-- Metadaten der Webseite -->
        <meta charset="UTF-8">
        <meta name="author" content="Heumann Marco">
        <meta name="keywords" content="Mathe, Mathematik, Lehramt, Gymnasium, Trainer, Übungen, lernen, Axiom, Axiome, Definition, Definitionen">
        <meta name="description" content="Definitions und Axioms-Trainer für das Lehramt der Mathematik an Gymnasien.">

        <!-- Verweis auf die JavaScripte die benutzt werden sollen -->
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script><!-- weil jQuery sexy ist-->
        <script type="text/javascript" src="https://c328740.ssl.cf1.rackcdn.com/mathjax/latest/MathJax.js?config=TeX-MML-AM_HTMLorMML"></script><!-- Matheformeln aufhübschen hiermit -->
        <script type="text/javascript" src="../javascript/ios.js"></script><!-- damits mit Touchscreens auch gut geht -->

        <!-- Eigene Javascripte -->
        <script type="text/javascript" src="javaTrainer.js"></script>

        <!-- Verweis auf die Styledateien die benutzt werden soll -->
        <link rel="stylesheet" type="text/css" href="styleTrainer.css"> 
</head>

<body>
    <div id="trainerheader">
        <h1>Definitions und Axioms - Trainer</h1>
    </div>

    <div id="trainercontent">
        <?php 
            //dynamischer php-Aufbau des Contents
            include 'trainerAuswahl.php';
        ?>
    </div>

    <div id="footer">
        <!-- php include des Footers-->
        <?php include '../includes/footer.php'; ?>
    </div>
</body>

コード、選択ページ:

<h2>Wähle Deine Abfrageoptionen</h2>
<form>
<fieldset>
<legend>Bereich einschränken</legend>
<p>
  <label>Semester / Kurs</label>
  <select id = "listSemester" name="selectSemester">
    <option value = "0">Alle</option>
    <option value = "1">1. Semester - Analysis einer Variablen</option>
    <option value = "2">2. Semester - Lineare Algebra</option>
  </select>
</p>

<p>
  <label>Kapitel / Thema</label>
  <select id = "listKapitel" name="selectKapitel">
    <option value = "1">Alle</option>
  </select>
</p>
 </fieldset>
 <fieldset>
<legend>Art der Abfrage</legend>
  <p>Unabhängig von der gewählten Option werden alle Relevanten Infos in der        Auflösung angezeigt. Je nach Frage kann es auch weitere Hinweise und Erklärungen geben.</p>
  <br/>       

  <input type = "radio" name = "skill" id = "geringID" value = "gering" checked =   "checked" />
  <label for = "geringID"><font color="green">Leicht</font> für Einsteiger, viel Text.</label><br/> 

  <input type = "radio" name = "skill" id = "gutID" value = "gut" />
  <label for = "gutID"><font color="orange">Medium</font> für Prüfungsvorbereitung, viele Formeln.</label><br/> 

  <input type = "radio" name = "skill" id = "perfektID" value = "perfekt" />
  <label for = "perfektID"><font color="red">Schwer</font> für Freaks, nur Formeln, Zahlen und Griechen!</label><br/>

  <input type = "radio" name = "skill" id = "testID" value = "test" />
  <label for = "perfektID"><font color="blue">Debug</font> für Testzwecke</label><br/>        
</fieldset>     
<p>
  <input type="submit" onclick="abfrage();" value="Starte die Abfrage"/>
</p>

コード、トレーナーページ:

<h2>Hier werden sie getestet!</h2>

<h3>Frage...</h3>
<p>Option 1</p>
<p>Option 2</p>
<p>Option 3</p>
<p>Option 4</p>
<p>Option 5</p>

<p><input type="submit" onclick="auswahl();" value="Back zur Auswahl"/></p>

コード、Javascript: 

//wenn jemand auf den Button klickt um die Abfrage zu starten
function abfrage()
{
$("#trainercontent").load('trainerAbfrage.php');
}

//wenn jemand auf den Button klickt um zur Auswahl zurück zu kommen
function auswahl()
{
$("#trainercontent").load("trainerAuswahl.php");
}
4

1 に答える 1

1 
return false;

送信アクションが実行されるのを防ぐために、js 関数で。例:

function abfrage()
{
$("#trainercontent").load('trainerAbfrage.php');
 return false; 
}
于 2013-05-18T13:19:59.350 に答える