JqueryとCookieを利用した特定のdiv要素の表示・非表示切り替え状態を保存できるコードの仕事
JqueryとCookieを利用した特定のdiv要素の表示・非表示切り替え状態を保存できるコードに関する仕事・募集案件ページです。クラウドソーシングのランサーズで、UIデザイン・設計に関する最適な外注/発注先をお探しの方、副業案件・求人をお探しのフリーランスの方はまず会員登録がおすすめです。
UIデザイン・設計に関連した他の仕事を探す
見積もり募集の結果
募集期間
5日間
提案数
8件
当選人数
1 件
(募集人数1人)
実際の発注内容
本人確認 CSS, JavaScript を使った動きのあるサイトはおまかせください！
- 希望時間単価 ---
- 実績 50
- 評価満足率 100 %
- プロジェクト完了率 100%
- 機密保持
- 本人確認
- 電話
■ 経歴 2011年〜2016年 メーカーにてソフトウェアエンジニアとして活動 2016年〜2017年 ITベンチャーにてWebエンジニアとして活動 2017年〜 ITベンチャーにてソフトウェアエンジニアとして活動 ■ スキル HTML / CSS / JavaScript (TypeScript, React, Redux) / Java / Node.js / Ruby /... 続きを読む
見積もり募集の内容
- 提示した予算
- 20,000 円 ~ 50,000 円
- 依頼概要
-
特定のClassを持ったdiv要素をボタンによって表示、非表示を切り替え、その状態をCookieを利用して閲覧者ごとに保存できるコードをコーディングしてほしいです。
できればJqueryを利用していただければと思います。
具体的には、以下のようなアンテナサイトの「非表示機能」（横のバツボタン）をイメージしています。
http://momoclo.antenam.info/
（非表示ボタンを押すとそのサイトがすべて非表示になるわけです。これをclassで実装したいです。）
下記に想定しているHTMLを書いておきます。
表示・非表示を切り替えてほしいのは「画像」「文章」の部分です。ボタンを押すことで表示・非表示が切り替えられ、それをCookieに保存したいです。
【HTML】
<div class="gazou1">画像１</div>
<div class="gazou2">文章2</div>
<div class="gazou3">画像3</div>
<div class="gazou1">画像４</div>
<div class="gazou5">画像5</div>
・・・・・・・・・・・・・・
<div class="gazou50">画像50</div>
<p><button id="del1">画像１を消す</button>
<button id="re1">画像１を表示する</button>
<button id="del2">文章２を消す</button>
<button id="re2">文章２を表示する</button>
<button id="del3">画像３を消す</button>
<button id="re3">画像３を表示する</button></p>
・・・・・・・・・・・・・・
<button id="del50">画像５０を消す</button>
<button id="re50">画像５０を表示する</button>
なお、自力で下記のコードを作成し、動作も確認できたのですが、これだとCookieが要素ごとに必要なため、最終的に数十個以上になってしまうという問題がありました。
勉強したら連想配列を利用するのが良いとのことでしたが、不勉強のため分かりませんので、この部分のコーディングをお願いします。
【JS】
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
//gazou1クラスを非表示にするクッキー
$(function () {
if($.cookie('1hihyouji')){
$('.gazou1').hide();
}
$('#del1').click(function() {
$('.gazou1').hide();
$.cookie('1hihyouji',
'val1',
{
expires: 3650,
path: '/'
});
});
//cookieを削除する
$('#re1').click(function(){
$('.gazou1').show();
$.removeCookie('1hihyouji' ,
'val1',
{
path:'/'
});
});
【注意点】
・セッションではありません。半永久的に表示・非表示状態が保存したいです。
・一つのボタンで非表示にするClass要素のあるブロックは複数にある場合があります（一つのボタンで、違う場所にある複数の異なるdivが非表示になるということです。画像や文章の属性ごとにdivのクラスを分けたいので、クラスにごとに非表示にしたいです。）
・新しいボタンを押したら前のボタンがリセットされる、というのはだめです。いくらでも表示・非表示を自由に切り替えられるようにしてください
・Jqueryの利用をお願いします。他にも、オープンとなっているコードを使用してくださっても構いません。
・上にも記述してあります通り、要素の数が多いのでCookieの数や容量が膨大になるのは避けてください
【報酬について】
不勉強ゆえ、どのくらいの労力が必要か分かりませんが、２万円前後を想定しています。交渉に応じさせていただきます。
実装の確認後、報酬をお支払いします。それまでにいくつかご質問等させていただく可能性がございます。
この仕事に似たUIデザイン・設計の他の仕事を探す
- エリア
- 東京都