data-のカスタム属性に対してtoggleClassしたかったんだけどやり方がわからなかった
環境
jQuery v2.1.4
Google Chrome
やりたいこと
よくECサイトで商品のレビューに☆が5つあって、該当する星を塗るという項目があるが、これをjQueryで実装してみた。
クリックした場所をdata-starで取得して、
それより低い数値のliに「glyphicon-star」(★)を、そうではないliに「glyphicon-star-empty」(☆)をセットしようと考えてみたが、他のdata-startのset方法がよくわからなかった。
<ul id="stars" class="star_list"> <li class="glyphicon glyphicon-star-empty" data-star="1"></li> <li class="glyphicon glyphicon-star-empty" data-star="2"></li> <li class="glyphicon glyphicon-star-empty" data-star="3"></li> <li class="glyphicon glyphicon-star-empty" data-star="4"></li> <li class="glyphicon glyphicon-star-empty" data-star="5"></li> </ul>
$(function () { $('#stars').on("click","li",function () { for (var i = 4; i >= 0; i--) { if (i < $(this).data("star")|0 ) { // 要素の書き方が分からない・・・ ???.toggleClass("glyphicon glyphicon-star"); } else { ???.toggleClass("glyphicon glyphicon-star-empty"); } } }); });
結局、idを振ってattrする方法で実現できたけど、data-に対してクラスをsetする方法ってどうやるんだろう??
rake でversion違うYOっていきなり怒られた。
朝、出社して リモートのmasterをpullして最新にしたのち、branchを作ってローカルで確認していた。
でもこれはcommitするものではなかったので、しばらくしてリモートでローカルを上書きしようとして最新を取り込もうとしたらどうやらこれはまずかったのかもしれない。
statusで確認してコミットしないファイルを
git rm --cached ファイル名
で変更履歴を削除したらそのファイルごと無くなってしまった。
予想と違う動きでちょっと焦り、
git reset --hard origin/master
で変更をなかったことにして、再度branchを切ってrake を実行したら下記のエラーが出た。
rake aborted! Gem::LoadError: You have already activated rake 10.5.0, but your Gemfile requires rake 10.4.2. Prepending `bundle exec` to your command may solve this.
Gemfile.lockを見たら確かに10.4.2って書いてあるけど、いつのまに10.5.0が有効になっていたのか。。。
$ gem list rake *** LOCAL GEMS *** rake (10.5.0, 10.4.2, 10.1.0)
入ってる。
updateした記憶も入れた記憶もないけど、どこで10.5.0を覚えてきたのか。
とりあえず起動時にversionを指定できるので、下記のコマンドで確認はできたが、面倒なのでどうにかしたい。
rake _10.4.2_ routes
modal画面上のボタンが,とある幅だと機能しない(解決)
発覚
同じ開発チームの人からログイン画面のログインがクリックしても反応しないという連絡を受けて、自分の環境で検証したが再現しなかった。
その画面の一部を作ったのは私だが、そんなdisabled仕込んでないぞ?と思って不思議に思っていた。
そしたら別の人も再現し、現象が判明した。
現象
環境は、
Bootstrap3
Google Chrome
で発生。
入り口の画面にあるログインボタンをクリックするとmodalでログイン画面を出し、二枚のdivを使ってログインとサインアップを兼用していた。
<div class="container"> <form > <button data-target="#login" data-toggle="modal" onclick="$('#signup').hide(); $('#login').show()" type="button"> Log in</button> </form> <!-- ログイン --> <div aria-hidden="true" id="login" tabindex="-1" style="display: none;"> <div class="modal-dialog"> <modal-content> (省略) <form action="login" method="post"> <div class="col-sm-12"> <div class="row"> <div class="col-xs-4"> <button class="btn btn-primary" id="btn-login" type="submit">Log In</button> </div> </div> </div> </form> (省略) <!-- サインアップ --> <div id="signup" style="display: none;"> (省略)
ところが、幅が890pxあたりになると急にLog Inボタンが機能しなくなる。
その前後の幅では問題なくログインできる。
表示幅のデザインが変わってから押せなくなるので、幅が切り替わった時に何か悪さをしているのかと思いきや、下部にあるdivのサインアップ側は正常に機能している。
サインアップ側は項目数などデザインは多少変わるが、ボタン周りはログインと同じ。
なぜログインは押せなくなるのか理由がわからないが、いろいろ調査したら原因が分かった。
原因
<div class="col-sm-12">
よく使うこれ。
これを外すとボタンが機能する。
原因がわからないのでどなたかご存知だったら教えて下さい。
ひとりごと:
メイン画面の幅とmodal側の幅が違うタイミングで幅が変わるのが悪さしてるのかも。
見た目は正常機能時と変わってないけど、modalの幅が変わったタイミングで実はformの外にボタンが飛び出してるんじゃないかという疑惑があったりなかったり。(未確認)
追記:
原因判明。
rowタグが一個足りなかったYO!
<!-- ログイン --> (省略) <form action="login" method="post"> これ→<div class="row"> <div class="col-sm-12"> <div class="row"> <div class="col-xs-4"> <button class="btn btn-primary" id="btn-login" type="submit">Log In</button> </div> </div> </div> </div> </form> (省略)
git のbranchで二人が作業してConflictが起きた
基本はpull
とあるブランチに対してAさんとBさんがそれぞれ作業をしてAさんがpushした。
BさんはAさんの変更を取り込みつつもブランチにpush したい。
pullしてみた。
$ git pull origin firstbranch:firstbranch remote: Counting objects: 1, done. remote: Compressing objects: 100% (1/1), done. remote: Total 1 (delta 0), reused 0 (delta 0) Unpacking objects: 100% (1/1), done. From xx.xx.xx.xx:myProject ! [rejected] firstbranch -> firstbranch (non-fast-forward)
rejected、拒否されたので次はマージを試みた。
$ git merge origin firstbranch Already up-to-date. Yeeah!
やけにテンション高い。
でも差分がないわけはないので、コマンドを調べてみた。
$ git pull origin firstbranch From xx.xx.xx.xx:myProject * branch firstbranch -> FETCH_HEAD Auto-merging README.md CONFLICT (content): Merge conflict in README.md Automatic merge failed; fix conflicts and then commit the result.
次はConflict、一歩前進。
どうやらREADME.mdが競合しているらしいので手で修正。
再度、ローカルのブランチに対してコミット。
$ git commit -m "コミット"
コミットができればあとはpullしてリモートに反映させる。
git pull origin firstbranch
これでリモートに変更を取り込んだ状態でpushできた。
参考
gitで新しく増えたファイル(untracked files)のみ一括で追加する
これはべんり。
git ls-files --others --exclude-standard | xargs git add
- ls-files → 管理しているファイルを見る
- --others → 追跡されていないファイルの一覧を表示
- --exclude-standard → .gitignore にマッチするファイルを含めない
- xargs → 上記を「git add」の引数にする
(メモ)Rails4 でレイアウトを使ってみた
が、仕組みがよくわからなかったのであとで調べる。
ナビバーとフッターをレイアウト化したい。
Railsでアプリケーションを作成したいたが、初めてのこともあり、
わりとダラダラ書いてしまったコードが多く、DIYの理念に反していたので
タイミングを見計らって綺麗にすることにした。
そんなわけで手始めにナビバーとフッターを共通部品にして埋め込みたい。
環境
Rails4
CentOS6.7
slim使用
書き方が???
レイアウトに重複している部分だけ引っこ抜いて別名で保存。
場所は view/layouts/_footer.html.slim
これを呼び出す方法は、といろいろ調べてみたが、
ざっと
- content_for :footer, render('layouts/footer') - render :partial => "layouts/footer" = render('layouts/footer') = yield :footer
の書き方があった。
違いが判らなかったのであとで調べるが、
とりあえず
= render('layouts/footer')
だけうまくいった。
追記:
色々呼び出し方法があるのでちゃんと覚える。
render :partial
部分テンプレートを呼び出す
render :partial => "部分テンプレート名"
yield
コントローラで処理された内容を埋め込む先を指定する。