5

私は JavaScript が初めてで、PHP の経験があり、主に HTML と CSS スタイルを使用しています。Eric Martin の Web サイトから simplemodal コンタクト フォームをダウンロードしました。次の場所にあるテスト Web サイトに、モーダル ポップアップ コンタクト フォームを実装することができました。

http://www.patagonia-tours.net/tours/patagonia.htm

このページでは 3 つの異なるツアーをリストアップしました。訪問者にそれぞれのツアーについて問い合わせ/質問してもらいたいので、モーダル フォームを追加しました。

私は2つのことを解決する必要があります:

ナンバー1

HTML からツアー名となる変数を JAVASCRIPT に渡します。この変数をお問い合わせフォームのタイトルとして使用します。この変数が contact.js ファイルのどこにあり、「title」という名前が付けられているかを突き止めました。

これは、モーダル フォームを呼び出す 3 つのボタンの HTML コードです。

<div id='contact-form'>
    <input type='button' name='contact' value='Ask a question / book' class='tour-button button-white' title='Tour: El Calafate / Ushuaia / Torres del Paine'>
</div> 

<div id='contact-form'>
        <input type='button' name='contact' value='Ask a question / book' class='tour-button button-white' title='Tour: Ushuaia / Australis / Paine / Calafate'>
    </div>

<div id='contact-form'>
        <input type='button' name='contact' value='Ask a question / book' class='tour-button button-white' title="Tour: Ushuaia / Puerto Madryn">

HTML の title 属性の値を JavaScript の「title」変数に渡す必要があります。

2番

同じ変数を PHP スクリプト (contact.php) に渡す必要があるので、それをメールの件名として使用して、訪問者がどのツアーに興味を持っているかを知ることができます。私は成功せずにいくつかの変種を試しました）。

4

1 に答える 1

4

私のコメントで述べたように、ID 値を重複させることはできません。そうしないと、javascript がどれを取得するかわかりません (1 つだけを想定しているため、最初の値で停止します)。

ID をクラスに変更すると、次のようなことができます。

<div id='contact-form'>
    <input type='button' name='contact' value='Ask a question / book' class='tour-button contact button-white' title="Tour: Ushuaia / Puerto Madryn">
</div>

var buttons = document.getElementsByClassName('tour-button');
for( var i = 0, l = buttons.length; i < l; i++ ) {
    buttons[i].addEventListener('click', function() { alert( this.title ); }, false);
}

番号 2 については、関連付けたコードを使用して新しい質問でこれを質問する必要があります。

編集：

変数が別の場所で定義されていると仮定するかvar title = '';、var title;上記のコードを次のように変更します。

var buttons = document.getElementsByClassName('tour-button');
for( var i = 0, l = buttons.length; i < l; i++ ) {
    buttons[i].addEventListener('click', function() { title = this.title; }, false);
}

最後にクリックされたボタンのタイトルの値を変数「タイトル」に割り当てます。クリック アクションを変更しようとしている場合は、そのコードをボタン クリックのイベント ハンドラーにも配置することをお勧めします。

于 2013-04-18T15:29:44.103 に答える