1

「展開」から「非表示」に、またはその逆にクリックすると、折りたたみ可能なリンクの名前を変更する汎用JavaScriptを作成しようとしています。

私はjQueryでそのために以下のコードを書きました：

$(".collapse").collapse();

$(".collapse").on('show', function() {
    $("a[data-target='#"+$(this).attr('id')+"']").text($("a[data-target='#"+$(this).attr('id')+"']").attr('data-on-hidden'))
});
$(".collapse").on('hidden', function() {
    $("a[data-target='#"+$(this).attr('id')+"']").text($("a[data-target='#"+$(this).attr('id')+"']").attr('data-on-active'))
});

これは次のHTMLと相互作用します。

<div class="collapse in" id="collapse-fields">
Expandable content
 </div>
 <a href="#" data-toggle="collapse" data-target="#collapse-fields" 
      data-on-hidden="Hide" data-on-active="Expand">Expand</a>

私はjQueryを初めて使用しますが、コードが正しい方法で記述されているのか、それともそのような関数を記述するためのより良いアプローチがあるのか​​疑問に思っていました。

4

1 に答える 1

2

一般的なソリューションを探しているので、これはどこでも機能するはずです:デモ (jsfiddle)

var $togglers = $('[data-toggle="collapse"]');    // Elements that toggle a collapsible
$togglers.each(function() {                       // Do the same thing for all elements
    var $this = $(this);
    var $collapsible = $($this.data('target'));   // Collapsibles of this iteration
    $collapsible.on('hidden', function() {
        var text = $this.data('on-hidden');       // Get the data-on-hidden attribute value
        text && $this.text(text);                 // If it has text to replace, change it
    }).on('shown', function() {
        var text = $this.data('on-active');       // Get the data-on-active attribute value
        text && $this.text(text);                 // If it has text to replace, change it
    });
});

折りたたみ可能なものを切り替える要素data-on-hiddenに属性とdata-on-active属性を追加するだけです。

注 :属性の値を自由に切り替えて、on-hidden が非表示のときに対応し、on-activeのときに表示されるようにしました。

于 2012-07-29T21:27:32.077 に答える