1

だからこれは私が持っているものです-MySQLデータベースデータからjsonを解析し、誰かが座席をクリックしたときにそれを表示するjavascript onclickイベント。 

 var jsonData = <?php echo json_encode($array); ?>;

function displayInfoForDiv(i){
    document.getElementById('fname').innerHTML = jsonData[i].first_name;
    document.getElementById('lname').innerHTML = jsonData[i].last_name;
    }

出力

    <?php while ($row = mysql_fetch_array($sql)){ ?>
    <p><span id="fname"><?php echo $row['first_name']; ?></span></p> 
    <p><span id="lname"><?php echo $row['last_name']; ?></span></p>
    <?php } ?>

PHPは、名前を検索しようとするときの検索ボックス用です-私はこれを使用しています

     $sql = mysql_query("select * from people where first_name like '%$term%' OR last_name LIKE '%$term2%'");

したがって、私が抱えている問題は、Matt を検索すると、複数の結果が表示されることです。言う：

マット・ハッセルベック
マット・ヒュー

しかし、onclick イベントを使用して joe の座席をクリックすると、次のように表示されます。

ジョー・フリル
マット・ヒュー

問題は、onClick イベントをトリガーしたときに検索結果が残ることですが、最初の結果が変更されることです。

私の質問は、座席をクリックして検索結果をクリアし、その座席のみを表示する方法はありますか? 検索を行って同様の名前を表示する方法はありますか?

PHP と JS を使用して同じデータを呼び出しています。これは、JS にはフロアの範囲しかないのに対し、php はデータベースからすべてを取得しているためです。

うまくいけば、これは明確です。ご意見をお寄せいただきありがとうございます。

4

1 に答える 1

1

ここで 2 つの問題が発生しています。

  1. id 属性に同じ値を複数回使用しています。
  2. 結果の設定に論理的な欠陥があります

問題 1 の解決策

id 属性を class 属性に変更

JavaScript で document.getElementById を使用すると、その ID を持つ最初の要素が返されます。つまり、同じ値を持つ複数の ID がある場合、最初の要素のみが選択されます。したがって、関数を次のように変更する必要があります

function displayInfoForDiv(i){
document.getElementsByClassName('fname')[i].innerHTML = jsonData[i].first_name;
document.getElementsByClassName('lname')[i].innerHTML = jsonData[i].last_name;
}

問題 2 の解決策

  • 結果にテンプレートを使用する

  • すべての結果を div タグでラップする

結果を div タグにラップすると、その div タグの html をクリアして結果をクリアできます。

<div id='Results'>
   <?php while ($row = mysql_fetch_array($sql)){ ?>
   <p><span class="fname"><?php echo $row['first_name']; ?></span></p> 
   <p><span class="lname"><?php echo $row['last_name']; ?></span></p>
   <?php } ?>
</div>

<script>
function clearResults()
{
    document.getElementById('Results').innerHTML='';
}
</script>

結果にテンプレートを使用するには、underscore.jsをお勧めします

したがって、ニーズに合わせたテンプレートは次のようになります。

<script id='result-template' type="text/x-jquery-tmpl">
    <p><span class="fname">${first_name}</span></p> 
    <p><span class="lname">${last_name}</span></p>
</script>

テンプレートを利用するには、次のようにします。

以下のコードは、underscore.js が含まれていることを前提としています。

function LoadResults(jsonData)
{
    _.templateSettings = {
        interpolate: /\$\{(.+?)\}/g
    };
    var output='',
    resultDiv=document.getElementById('Results');
    template= _.template(
        document.getElementById('result-template').innerHTML
        );

    clearResults();

     for(x in jsonData)
     {
        resultDiv.innerHTML+=template(jsonData[x]);
     }
}
于 2012-10-13T23:30:58.797 に答える