each文で表現したリスト表記の特定の部分のみ表示したい

Question

railsでメモアプリを制作しようと思っています。
each文を使用してリスト表記したオブジェクトをjQueryで見出しを開く、閉じるといった機能を実装したいと考えています。
以下、ビューのhamlファイルです。

.list
  .list--title
   My tips一覧
  .list--box
   .list__a-tips
    - @memo.each do |memo|
     .list__a-tips__block.a-memo
      .list__a-tips__block--title
       #{memo.title}
      .list__a-tips__block--body.blind.switchin
       = simple_format(memo.body)
      .list__a-tips__block--url.blind.switchin
       .list__a-tips__block--url--left
        参考サイト
       .list__a-tips__block--url--right
        .list__a-tips__block--url--right--link
         =link_to "#{memo.link}","#{memo.link}"
      .list__a-tips__block--menu.blind.switchin
       .list__a-tips__block--menu--date
        #{memo.created_at}
       .list__a-tips__block--menu--edit
        =link_to"編集",edit_memo_path(memo.id)  
       .list__a-tips__block--menu--delete
        =link_to"削除",memo_path(memo.id),method: :delete
      %button.list__a-tips__block--open.opens.switchout
       =icon('fa','chevron-down') 
      %button.list__a-tips__block--close.closes.blind.switchin
       =icon('fa','chevron-up') 

以下、scssファイルです

.list{
  background-color: #778899;
  width: calc(100% - 210px);
  &--title{
    text-align: center;
    font-size: 40px;
    
  }

  &--box{
    background-color:green;
  height:520px;
  overflow: scroll;
}
  &__a-tips{
  background-color: green;
  width: 1000px;
  margin: 20px 50px;
  border-width: 2px;
  border-color: black;
  text-align: center;
  margin-bottom: 10px;
  .blind{
    display: none;
  }
  .show{
    display:block;
  }
  &__block{
    background-color: white;
    margin-bottom: 20px;
    border-bottom: solid;
    border-style: solid;
    
  &--title{
    font-size: 18px;
    border-bottom: solid;
  }
  &--body{
    border-bottom: solid;
    min-height:100px ;
    max-height: 350px;
    text-align: left;
    overflow: scroll;
  }
  &--url{display: flex;
    text-align: center;
    height: 30px;
    font-size: 15px;
    &--left{
      border-bottom: solid;
      border-right: solid;
      width: 300px;
    }
    &--right{
      width: 700px;
      border-bottom: solid;
      overflow: scroll;
      &--link{
        width: 650px;
        margin: 0 25px;
        max-height: 30px;
        text-overflow: ellipsis;
      }
    }
   }
  &--menu{
    display: flex;
    text-align: center;
    border-bottom: solid;
  &--date{
    width: 600px;
    border-right: solid;
  }
  &--edit{
    width: 200px;
    border-right: solid;
  }
  &--delete{
    width: 200px;

  }
  }
  &--open{
    font-size:15px;
    height: 20px;
    line-height: 20px;
    border: none;
  }
  &--close{
    font-size:15px;
    height: 20px;
    line-height: 20px;
    border: none;
  }
}
}
}

![]
最初はこのように格納されていますが下の矢印をクリックすると

このように見出しを開く感じです。
jsファイルを以下のように設定したところ、矢印を押すとすべての見出しが開く、閉じる様になりました。

$(function(){
  let opens=$(".opens")
  let closes=$(".closes")
  function tipsopen(){
    $(".switchin").removeClass("blind")
    $(".switchout").addClass("blind")
  }
  function tipsclose(){
    $(".switchout").removeClass("blind")
    $(".switchin").addClass("blind")
  }


  opens.click(tipsopen)
  closes.click(tipsclose)
})

矢印をクリックするとそのメモの内容部分だけ表示するようにするにはどうしたら良いのでしょうか？

メモのリストをjsファイルで
let memos=$(".a-memo")と定義して

function tipsopen(){
    const index=memos.index(this)
    $(".switchin").eq(index).removeClass("blind");
    $(".switchout").eq(index).addClass("blind");
console.log(index)
  }
  function tipsclose(){
    〜略〜
  }
  opens.click(tipsopen)
  closes.click(tipsclose)
})

としたのですが開くボタンを押すと開かず、console.log(index)はクリックしたメモのid番号が返ってくると思っていたら「-1」と返ってきました。

長くなってしまい申し訳ございませんがよろしくお願いいたします。

Answer 1

hamlがあまりわからないのですが、ボタンを押したときに、そのボタンのあるメモを開きたいということで良いですよね。
それであれば方法としては、2つ思い浮かびました。

1つは、jQueryのclosestを利用して、ボタンのあるメモを開く・閉じる動作を実装する方法。

1つは、.list__a-tips__block.a-memoここらへんにmemoのidをクラスとして登録し、ボタンにも同じクラスを登録する方法。

前者の実装が楽そうですね。

Comments

[ryuuzu]

ご回答ありがとうございます。学習が足りず大変申し訳無いのですがclosestを使用してどのように個々のメモのみを取得するのでしょうか？隠すエリアをまとめておくような親要素を作る感じでしょうか？

[no1knows]

.a-memoがメモをwrapしているのだとすると、.closest('.a-memo .xxxx')にaddClassする形でしょうか？
兄弟要素をとるprevとかでも良いですが、（hamlがよく分かっていないので恐縮ですが）要素数的に少し面倒な気がしたので…

[ryuuzu]

試しに
.closest("#a-memo",".list__a-tips__block")としたら検証ウィンドウに
0: div#a-memo.list__a-tips__block
1: div#a-memo.list__a-tips__block
2: div#a-memo.list__a-tips__block
3: div#a-memo.list__a-tips__block
4: div#a-memo.list__a-tips__block
5: div#a-memo.list__a-tips__block
6: div#a-memo.list__a-tips__block
7: div#a-memo.list__a-tips__block
8: div#a-memo.list__a-tips__block
9: div#a-memo.list__a-tips__block
length: 10
以下略

と表示されており、現状では要素すべてを取得しています。この左列にある０〜９を指定して取得する方法のようなものはないでしょうか？

[no1knows]

ごめんなさい。間違っていました。下記のような形です。

$('button').on('click', function() {
$(this).closest('.a-memo).find('.switch**').addClass("blind");

ボタンをラップしている要素(a-memo)をclosestで探して、そこを起点にしてblindクラスをつけるための要素(switch**')をfindする形です。

[no1knows]

あとturbolinksを利用しているなら、jQueryの書き方は、下記を参考にしてくださいね。
https://teratail.com/questions/238895#reply-347312

[ryuuzu]

出来ました！
hamlファイルの７行目を
.list__a-tips__block.a-memoから
.list__a-tips__block#a-memoに変えてjsファイルを
$(function(){

let opens=$(".opens")
let closes=$(".closes")
function tipsopen(){
$(this).closest('#a-memo').find(".switchin").removeClass("blind")
$(this).closest('#a-memo').find(".switchout").addClass("blind")
}
function tipsclose(){
$(this).closest('#a-memo').find(".switchout").removeClass("blind")
$(this).closest('#a-memo').find(".switchin").addClass("blind")
}

opens.click(tipsopen)
closes.click(tipsclose)
});
と変更したら実装できました！

そして実はturbolinksの問題も抱えていたので一気に悩みが解決しました！！本当にありがとうございました！！

[no1knows]

ひとまず解決してよかったです！

一応、念の為、（hamlがわからないのですが...）下記のようにしたら1ページにid="a-memo"が複数存在することになりませんか？
> .list__a-tips__block.a-memoから.list__a-tips__block#a-memoに変えて
HTMLに準拠した形だと同じid名は1ページに1つだけにするようにというルールがあります。
そのためclosestを利用してclassで取る形を検討頂いたほうが良いかと思います。

[ryuuzu]

ありがとうございます。「一つだけを取得」に固執しすぎてidで登録しておりました・・・。closestなら同じクラスで複数あっても一つだけしか取らないんですね。こちらで統一させていただきます！

[no1knows]

イベント関係は、今回のように親子関係や兄弟関係を使うことが多い気がします。
ぜひうまく使いこなして下さい！

http://semooh.jp/jquery/api/traversing/closest/%5Bexpr%5D/
開始要素から最も近い親要素を選択します。引数にセレクター書式を指定した場合、マッチする最も近い親要素を返します。
フィルタにマッチすれば、開始要素そのものが返る場合もあります。
ルートドキュメントまで辿ってもマッチする要素が無い場合、戻り値はnoneになります。