0

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

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

$('button').click(function() {
    $('#myElement').toggle(function() {
        if ($(this).css('display')==='none'){
           $(this).prop('hidden', 'hidden');
        }
        else
        {
           $(this).removeProp('hidden');
        }
    })
})
<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>

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

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

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

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

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

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

1 件の回答 1

1

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

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

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

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


<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>

2
  • そうかtoggle関数にで呼び出してるからそのことを考慮しないといけないんですね、書いていただいたコードだと動かなかったのですがもう少し調べてみます。
    – ironsand
    Commented 2016年6月3日 8:28
  • @ironsand デモを追加しました。
    – BLUEPIXY
    Commented 2016年6月3日 8:35

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。