複数ページフォームのトゥーストグルトグルボタン？

Question

この記事をチェックアウトする時間を取るためにHowdyの皆さん、ありがとうございます。この特定の問題を解決するのに役立つチュートリアルを高低に捜しました。ここのどこかで私に何かガイダンスを提供するのに十分親切かもしれないと思っていますか？

基本的に私のクライアントは、私が下にリンクしている画像に描かれているように、ユーザーが歯科用チャートから個々の歯を選ぶことができるマルチページ形式が好きです。最初の画像は、選択されたいずれかの歯なしに歯科用チャートを示す第2の画像は、選択されたランダムな歯と同じチャートを示しています。ユーザは、対応するデータが必要がある個々の歯を選択すると

Dental Chart w/out Selections

Dental Chart w/Selections

を私のクライアントが以下の方法で電子メールで受け取る複数ページのフォーム提出要約内に表示されます。

選択された歯のそれぞれについて、「歯面インプラント：3,8,9,16,19,27,31」と表示されます。また、ユーザーは、最初からやり直したい場合は、「リセット」ボタンを使って選択内容をリセットする必要があります。

これを達成するための最良の方法として、皆さんがお勧めするものを知りたかっただけですか？私のクライアントのサイトはJoomla！あなたが私が働いているものを知っているだけです。 :)

もう一度、ありがとうございました！

ベスト、よく

シェーン

Answer 1

。これはかゆみになるか、そうだと感じます。 個々の歯を別々に切断すること以外は気になりません。.pngを作成してから、歯の番号を画像のalt属性とするなどして、div内に各歯の画像を絶対的に配置します。

また、これらの切り抜かれた画像すべてに対してピンクのバージョンを作成する必要があります。

これをクリックすると、アクティブなクラスがクリックされたときのクリックイベントをバインドできます。また、src属性を変更すると、選択した歯が表示されます。

jQueryの例その後

$('.tooth').click(
    if($(this).hasClass('active')){ 
     $(this).removeClass('active').attr('src','whiteVersion.png'); 
    } else { 
     $(this).addClass('active').attr('src','pinkVersion.png'); 
    } 

) 

することができますこれらの個々の画像をループし、その文字列を生成する：再び3、8、9、16、19、27、31

を - のjQueryを例

var selected = ''; 
$('.tooth').each(function(){ 
    if($(this).hasClass('active')){ 
     if(selected === ''){ 
      selected = $(this).attr('alt'); 
     } else{ 
      selected += ', ' + $(this).attr('alt'); 
     } 
    } 
}) 

* 簡単な方法： * は、各歯の歯数が大きい大きな歯の画像を持つことになります。次に、ユーザーは自分自身に数字を入力できます。