

HTML5にある、`hidden`属性をjQueryで扱うためにこちらにある関数を使いたいのですが、jQueryのメソッド拡張がうまくいきませんでした。

<https://jsfiddle.net/jhfrench/g8Sqy/>

[code]

    $('button').click(function() {
        $('#myElement').toggle(function() {
            if ($(this).css('display')==='none'){
               $(this).prop('hidden', 'hidden');
            }
            else
            {
               $(this).removeProp('hidden');
            }
        })
    })
[/code]

[code]

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <p id="myElement">Hi there</p>
    <button>Give it a whirl</button>
[/code]

まず以下のように直接書けば想定通りの動作になることを確認して

[code]

    $('#myElement').toggle(function() {
            if ($(this).css('display')==='none'){
               $(this).prop('hidden', 'hidden');
            }
            else
            {
               $(this).removeProp('hidden');
            }
     });
    
[/code]

つぎに`app/assets/javascripts/toggleHide.js`という名前で以下のファイルを作成

[code]

    jQuery.fn.extend({
        toggleHide: function () {
            if ($(this).css('display') === 'none') {
                $(this).prop('hidden', 'hidden');
            }
            else {
                $(this).removeProp('hidden');
            }
        }
    });
    
[/code]

そして先程の呼び出しを`$('#myElement').toggleHide();`に変えたのですが、動作しませんでした。

RailsでjQueryにメソッドを追加したい場合、どうすればよいのでしょうか？


CC BY-SA 4.0
2016-05-30T22:01:23.517
25319
2019-12-13T19:25:43.027
2019-12-13T19:25:43.027
32986
3271
question
javascript ruby-on-rails jquery
jQueryのメソッド拡張をRailsで使いたい


Railsはこの場合関係無いと思います。

トグル版と拡張メソッド版での違いというと、  
トグル版は`.hide()`がアニメーション的に実行された後コールバック関数が実行されます。  
拡張メソッド版はその動作がありませんので、ちょうど条件が反対（.hide()が実行されていないつまり`display:none`ではない）のようなイメージになります。  
それで、

[code]

    jQuery.fn.extend({
        toggleHide: function () {
            if ($(this).css('display') === 'none') {
                $(this).removeProp('hidden');
            }
            else {
                $(this).prop('hidden', 'hidden');
            }
        }
    });
    
[/code]

のように書くことでhidden属性による表示のトグルをすることになると思います。  
したい動作を勘違いしていたらすみません。

* * *
[code]

    <html>
    <head>
    <title>SAMPLE</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>
    jQuery.fn.extend({
        toggleHide: function () {
            if ($(this).css('display') === 'none') {
                $(this).removeProp('hidden');
            }
            else {
                $(this).prop('hidden', 'hidden');
            }
        }
    });
    </script>
    </head>
    <body>
    <p id="myElement">Hi there</p>
    <button>Give it a whirl</button>
    <script>
    $('button').click(function() {
     $('#myElement').toggleHide();
    })</script>
    </body>
    </html>
[/code]


CC BY-SA 3.0
2016-05-31T09:44:34.263
25337
2016-06-03T08:34:39.127
2016-06-03T08:34:39.127
5044
5044
25319
answer