jquery にて、アラートダイアログ表示

解決済

質問者：kazuya88
質問日時：2010/03/19 11:06
回答数：2件

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-d …

（２）
上記アラートで OK を押したら、
.stock の backgroung-color を #FF0000; にして目立たせる。

以上です。
つたない説明で申し訳ないですが、
何卒よろしくお願い致します。

不明な点があったら、補足します。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： my--
回答日時：2010/03/19 17:14

<!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関数を呼んでやればよろしいかと。
動作確認は十二分に。