質問編集履歴

2 説明文に補足を書きました。

hyskyo

hyskyo score 74

2015/10/19 21:24  投稿

Javascript 最新順に表示、何もない場合の時のメッセージ表示尚且つ画像を渡されたらメッセッジーは表示されないで画像が表示される
最終的にしたいこと:
1,一覧をページに
まだ何も保存されていなかった場合にはメッセージを表示したいです(例:何もクリックされていません)。尚且つ、逆に画像が渡されたらメッッセージは非表示で画像が一覧で表示されるようにしたいです。
2,最新順が一番上に表示されるようにしたいです、
まだ何も保存されていなかった場合にはメッセージのみを表示したいです(例:何もクリックされていません)。尚且つ、逆に画像が渡されたらメッッセージは非表示で画像のみが一覧で表示されるようにしたいです。
2,最新順が一番上に表示されるようにしたいです、補足:例えば:画像が100個あるとして、一番最後に来た画像が一番上に表示されますように;
現状はまだ保存されてない場合は真っ白な画面になってます
下記は登録画面でボタンが押されたら表示する処理のlist.htmlです
<!DOCTYPE html>
<html lang="ja"><head>
<script src="/js/jquery.cookie.js" charset="euc-jp"></script>
<script type="text/javascript" charset="utf-8">
$(function() {
$(document).ready( function(){
var ss = $.cookie('favorite');`
if (!(ss == true )) {
$('#list').text('何もクリックされていません');
} else if (ss = $.cookie('favorite')){
ss = JSON.parse(ss);
for (var i = 0; i < fa.length; i++) {
ss[i] = ss[i].substring(ss[i].lastIndexOf('_0') + 2, ss[i].length);
var d = ss[i].split('_');
$('#list').append($('<img src="' + d[1] + '">''));
};
}
});
</script>
</head>
<body class="index" >
<div id="list">
</div>
</body>
</html>
下記は基本になる登録image.htmlです
<!doctype html>
<html lang="ja">
<script>
$(function () {
$(document).ready( function(){
});
$('img[src="/images/btn_favorite.png"]').click(function () {
var index = $('img[src="/images/btn_favorite.png"]').index(this);
var h2 = $('div.box_text:eq(' + index + ')').children('h2');
var img = $('div.box_main:eq(' + index + ')').find('img');
var src_para = $(this).closest('a').attr('href');
$.cookie.json = true;
var data = $(h2).text() + '_' + './' + img.attr('src');
if ($.cookie('favorite') == null) {
var p = [];
p.push(data);
$.cookie('favorite', JSON.stringify(p), {'expires':7, 'path': '/'});
}
else {
var ss = JSON.parse($.cookie('favorite'));
console.log(ss);
if (ss.indexOf(data) == -1) {
ss.push(data);
}
$.cookie('favorite', JSON.stringify(fa), {'expires':7, 'path': '/'});
}
});
});
</script>
</head>
<body>
<div class="box_main">
<div class="photo"><a href=""><img src="images/A.jpg" ></a></div>
<div class="box_text">
<h2>表品A</h2>
</div></div>
<table width="100%">
<tbody>
<tr>
<td width="50%">
<a href="" class="etc_link"><img src="/images/btn_favorite.png"></a>
</td>
</tr>
</tbody>
</table>
<div class="box_main">
<div class="photo"><a href=""><img src="images/B.jpg" ></a></div>
<div class="box_text">
<h2> 商品B</h2>
</div></div>
<table width="100%">
<tbody>
<tr>
<td width="50%">
<a href="" class="etc_link"><img src="/images/btn_favorite.png"></a>
</td>
</tr>
</tbody>
</table>
<div class="box_main">
<div class="photo"><a href=""><img src="images/C.jpg"></a></div>
<div class="box_text">
<h2> 商品C</h2>
</div></div>
<table width="100%">
<tbody>
<tr>
<td width="50%">
<a href="" class="etc_link"><img src="/images/btn_favorite.png"></a>
</td>
</tr>
</tbody>
</table>
</html>
  • JavaScript

    37553 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • Cookie

    423 questions

    HTTPにおけるCookieとは、クライアントのウェブブラウザ上に保存された一時的なデータを指します。クライアント側のJavaScriptでも、サーバー側のHTTPヘッダーでもクッキーの読み書き・修正・削除が可能です。

1 タイトルに言語名を追加しました

hyskyo

hyskyo score 74

2015/10/18 23:39  投稿

最新順に表示、何もない場合の時のメッセージ表示尚且つ画像を渡されたらメッセッジーは表示されないで画像が表示される
Javascript 最新順に表示、何もない場合の時のメッセージ表示尚且つ画像を渡されたらメッセッジーは表示されないで画像が表示される
最終的にしたいこと:
1,一覧をページに
まだ何も保存されていなかった場合にはメッセージを表示したいです(例:何もクリックされていません)。尚且つ、逆に画像が渡されたらメッッセージは非表示で画像が一覧で表示されるようにしたいです。
2,最新順が一番上に表示されるようにしたいです、
現状はまだ保存されてない場合は真っ白な画面になってます
下記は登録画面でボタンが押されたら表示する処理のlist.htmlです
下記は基本になる登録image.htmlです

表品A

商品B

商品C

  • JavaScript

    37553 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • Cookie

    423 questions

    HTTPにおけるCookieとは、クライアントのウェブブラウザ上に保存された一時的なデータを指します。クライアント側のJavaScriptでも、サーバー側のHTTPヘッダーでもクッキーの読み書き・修正・削除が可能です。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る