27474


テキストをクリックしたときに、背景の色を変更させるということをjQueryで行っております。  
(下記テストページにてご確認頂けます)

<http://45.62.253.224/>

html

[code]

    <p id='apple'>apple</p>
    <p id='banana'>banana</p>
    <p id='cake'>cake</p>
    <input type="submit" value="OK">
    
[/code]

jQuery

[code]

    $(document).on('click','#apple',function(){
        console.log($(this).css("background-color") );
    
      if($(this).css('background-color')=='rgb(255, 0, 0)' ){
        $(this).css({'background-color':'white','color':'black'});
      }else{
        $(this).css({'background-color':'red','color':'black'});
      }
    });
    
    $(document).on('click','#banana',function(){
        console.log($(this).css("background-color") );
    
      if($(this).css('background-color')=='rgb(255, 0, 0)' ){
        $(this).css({'background-color':'white','color':'black'});
      }else{
        $(this).css({'background-color':'red','color':'black'});
      }
    });
    
    $(document).on('click','#cake',function(){
        console.log($(this).css("background-color") );
    
      if($(this).css('background-color')=='rgb(255, 0, 0)' ){
        $(this).css({'background-color':'white','color':'black'});
      }else{
        $(this).css({'background-color':'red','color':'black'});
      }
    });
    
[/code]

[OK]ボタンを押下したときに、色を変更した部分の要素（apple,banana,cake）を取得してrailsのコントローラー上へ送り、データベース（rails付属のsqlite）上へ保存したいのですが、どうしたらよろしいでしょうか？

POSTで送るとした時に、homeコントローラーのhogeアクションがありFugaというモデルがあった場合  
下記のようになるのかなと思うのですが、＊１部分が分からず困っております。

homeコントローラー

[code]

    def hoge
      @fuga = Fuga.new()
      @fuga.value = ここに背景が赤くなった要素　＊１
    　@fuga.save
    end
    
[/code]

どうしたらトップページの[OK]ボタンを押下した時に、背景が赤い要素（idの値）を取得することができますでしょうか？

ご助言頂けましたら幸いです。


CC BY-SA 3.0
2016-06-30T14:51:32.943
27228
2016-07-09T09:17:24.643
14384
question
ruby-on-rails jquery
Ruby on Rails 上にて jQuery を利用した場合の値取得方法について


※ idを取得するところが知りたいという質問だったのでそれに絞って回答しました。

クリックに反応するp要素に共通のクラスを持たせておけば扱いやすくなると思います。  
仮に `clickable` というクラスを持たせるなら、以下のように

[code]

    $('input').on('click', function() {
      $('p.clickable').each(function() {
        if ($(this).attr('background-color') === 'rgb(255, 0, 0)') {
          console.log(this.id);
        }
      });
    });
    
[/code]

のようにクリックして色が赤くなったものを判定できますし、 `console.log` する代わりに配列に `push`
していけばidを集めることが出来ます。

さらに手を加えるなら、以下のようにクリックされた時のスタイル

[code]

    <style>
    p { background-color: white; }
    p.changed { background-color: red; }
    </style>
    
[/code]

を用意して、

[code]

    $('p.clickable').on('click', function() {
      $(this).toggleClass('changed');
    });
    
[/code]

で背景色を切り替えることにし

[code]

    $('input').on('click', function() {
      var ids = $('p.changed').map(function() { return this.id; });
      // $.ajaxしたりform作ってsubmitしたり
    });
    
[/code]

のようにidを集めることが出来ます。


CC BY-SA 3.0
2016-07-09T09:17:24.643
27474
2016-07-09T09:17:24.643
17037
27228
answer