- ベストアンサー
jquery にて、アラートダイアログ表示
jquery を用いて、 下記のようなアラートアクションをしたいと思っています。 ○HTML /* ----------------------------------- */ <table id="stockWrap"> <tr><td class="stock">即納</td></tr> <tr><td class="stock">【予約注文】3ヶ月</td></tr> <tr><td class="stock">【予約注文】6ヶ月</td></tr> </table> /* ----------------------------------- */ ○条件 #stockWrap の中に、 「【予約注文】○ヶ月」と「即納」が混在している場合。 または、 「【予約注文】○ヶ月」と「【予約注文】○ヶ月」が混在ある場合。 ただしその他の条件として、 ※<tr>～</tr> の数は状況によって変わり、中身も「【予約注文】○ヶ月」か「即納」も状況により変化します。 ※「【予約注文】○ヶ月」１つのみの場合、「即納」１つのみの場合、「即納」が複数ある場合は、除外します。（アクション開始しません） ※上記には 3ヶ月や 6ヶ月 とありますが、【予約注文】○ヶ月 は変わる場合があるので、前方一致で【予約注文】と指定したいと思っています。 ○アクション （１） アラートダイアログが表示。 可能でしたら、「jQuery Alert Dialogs」を用いてダイアログを表示させたい。 テキストは、 「 納期が違う商品は、同時に決済ができません。<br>別々に注文ください。 」 と表示さたいと思っています。 「jQuery Alert Dialogs」 http://abeautifulsite.net/2008/12/jquery-alert-dialogs/ （２） 上記アラートで OK を押したら、 .stock の backgroung-color を #FF0000; にして目立たせる。 以上です。 つたない説明で申し訳ないですが、 何卒よろしくお願い致します。 不明な点があったら、補足します。
- kazuya88
- お礼率28% (38/134)
- JavaScript
- 回答数2
- ありがとう数5
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=shift_jis"> <title>sample</title> <meta http-equiv="content-style-type" content="text/css"> <meta http-equiv="content-script-type" content="text/javascript"> <style type="text/css"> #popup_container { font-family: Arial, sans-serif; font-size: 12px; min-width: 300px; /* Dialog will be no smaller than this */ max-width: 600px; /* Dialog will wrap after this width */ background: #FFF; border: solid 5px #999; color: #000; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; } #popup_title { font-size: 14px; font-weight: bold; text-align: center; line-height: 1.75em; color: #666; background: #CCC url(images/title.gif) top repeat-x; border: solid 1px #FFF; border-bottom: solid 1px #999; cursor: default; padding: 0em; margin: 0em; } #popup_content { background: 16px 16px no-repeat url(images/info.gif); padding: 1em 1.75em; margin: 0em; } #popup_content.alert { background-image: url(images/info.gif); } #popup_message { padding-left: 48px; } #popup_panel { text-align: center; margin: 1em 0em 0em 1em; } </style> <script src="jquery-1.3.2.js" type="text/javascript"></script> <script src="jquery.alerts.js" type="text/javascript"></script> <script type="text/javascript"> function check() { var elem = $('#stockWrap'); if (elem && elem.text) { var text = elem.text(); var match1 = text.match(/即納/); var match2 = text.match(/【予約注文】\d+/g); if (!match1 && !match2) return false; //- 納期が同じなら【予約注文】複数でもOK ---------- var match2Flag = false; if (match2) { for (var i = 1; i < match2.length; i++) { if (match2[0] != match2[i]) { match2Flag = true; break; } } } if ((match1 && match2) || match2Flag) { //- 納期が同じなら【予約注文】複数でもOKここまで -- //if ((match1 && match2) || (match2 && match2.length > 1)) { // 納期が同じでも【予約注文】複数NG jAlert( '納期が違う商品は、同時に決済ができません。\n別々に注文ください。', 'タイトル', function() { $('td.stock').css('background', '#ff0000'); } ); return false; } return true; } return false; } </script> </head> <body> <table id="stockWrap"> <tr><td class="stock">即納</td></tr> <tr><td class="stock">【予約注文】3ヶ月</td></tr> <tr><td class="stock">【予約注文】6ヶ月</td></tr> </table> <div><button onclick="alert(check());">check</button></div> </body> </html> jquery使うならこんな感じでしょうか。 >「【予約注文】○ヶ月」 「【予約注文】半角数値文字の並び」で検索しています。 ○以外は書式が変わらないことが前提です。 <tr><td class="stock">【予約注文】3ヶ月</td></tr> <tr><td class="stock">【予約注文】3ヶ月</td></tr> 事前に対処されてるかも知れませんが、このパターンはOKで評価しています。 NGならこちらで if ((match1 && match2) || (match2 && match2.length > 1)) 適当なところでcheck関数を呼んでやればよろしいかと。 動作確認は十二分に。
その他の回答 (1)
- yyr446
- ベストアンサー率65% (870/1330)
質問文を読んでも、判定の根拠（ロジック）が理解できません。 言葉でもよいですから、もっと整理して論理的に記述できませんか？ って、それが出来るぐらいなら、ご自身でロジックのコードを書く事 が出来るだろうから、ここに質問したりしないだろうなあ... 回答者には、推理力と日本語読解力も要求される。
お礼
その通りだと思います。 ご指摘ありがとうございます。
お礼
ありがとうございます！ 求めていたものです。大変助かりました。 またご機会がございましたらよろしくお願いいたします。