1

トグルするアイテムのIDをパラメーターとして受け取るjQueryを使用して柔軟なトグル関数を作成しようとしています。関数は、正しいIDを関数に渡すリンクによってトリガーされます。

現時点でのコードは次のとおりです。

function boldToggler(itemid){
$(itemid).toggle(function(){
    $(itemid).css("font-weight","bold");},
function(){
    $(itemid).css("font-weight","normal");});
}

これは、次のようなリンクによってトリガーされます。

<a href="javascript: boldToggler('h1')">toggle style for this item</a>
<a href="javascript: boldToggler('h2')">toggle style for this item</a>

これを機能させる方法はありますか？何百ものトグル関数を書く手間が省けます！

どんな助けでも素晴らしいでしょう、ありがとう

4

7 に答える 7

5

そういう意味ですか？

function boldToggler(itemid) {
    $(itemid).css("font-weight", function(i, val) {
        return val == "bold" ? "normal" : "bold";
    });
}

デモ: http://jsfiddle.net/kbQXd/

于 2012-09-05T11:58:45.123 に答える
2

たぶん、この代替コードが役立つかもしれません - Fiddle: http://jsfiddle.net/9zxbT/

HTML

<a href="#" data-toggle="h1">toggle style for H1</a>
<a href="#" data-toggle="h2">toggle style for H2</a>

<h1>this is H1</h1>
<h2>this is H2</h2>

CSS

.bold { font-weight: bold; }

jQuery

$('a[data-toggle]').on('click', function(evt) {
    evt.preventDefault();
    $($(this).data('toggle')).toggleClass('bold');
});

これにより、インライン ハンドラーが完全に削除され、JavaScript と CSS がより適切に分離data-*され、属性を使用して目的のセレクターが設定されます。

于 2012-09-05T12:03:40.503 に答える
1

関数をこれに変更します

function boldToggler(itemid){
$('#' + itemid).toggle(function(){
    $('#' + itemid).css("font-weight","bold");},
function(){
    $('#' + itemid).css("font-weight","normal");});
}
于 2012-09-05T12:00:14.913 に答える
1

マークアップを少し変更して、もう少し jQuery っぽくしたくなるかもしれません。

<a href="#" class="boldToggler" data-selector="h1">toggle style for h1</a>
<a href="#" class="boldToggler" data-selector="h2">toggle style for h2</a>

次に、次のような方法を使用します。

$('.boldToggler').click(function(){
    var itemSelector = $(this).data('selector');
    $(itemSelector).toggleClass('bold');
});

次のように定義された css クラスを使用します。

.bold{
 font-weight:bold;  
}

実際の例: http://jsfiddle.net/NTSzs/

于 2012-09-05T12:05:32.127 に答える
0

「#」がありません:

$('#'+itemid).css....
于 2012-09-05T11:58:03.440 に答える
0

jQuery で toggleClass メソッドを使用できます。

<a href="javascript: $('h2').toggleClass(bold);">toggle style for this item</a>

クラスを定義するだけです：

.bold { font-weight: bold; }
于 2012-09-05T11:59:12.190 に答える
0 
function boldToggler(itemid){
    if($('#'+itemid).css("font-weight") == "normal"){
        $('#'+itemid).css("font-weight",'bold');
    }else{
        $('#'+itemid).css("font-weight",'normal');
    }
}
于 2012-09-05T11:59:54.763 に答える