0

ほとんど同じことを何度も行うJavaScriptコードがあります。これを少しクリーンアップする関数を作成する方法はありますか?

私が関数にしたい2つのことは次のとおりです。

明るい（）

$(VARIABLE).find('.info').fadeTo('fast', 1);
$(VARIABLE).find('img').fadeTo('fast', 1);

ライト（）

$(VARIABLE).find('.info').fadeTo('fast', 0);
$(VARIABLE).find('img').fadeTo('fast', 0.8);

.

その特定の部分を変更できるように、関数に変数を渡すことができるようにしたいです。私はJavaScriptが初めてなので、この種の質問は一度だけします。前もって感謝します。

$(document).ready(function(){
var subject;
$('.subject').mouseenter(function(){
    if ( $(this).hasClass(subject) ) {
        return 0;
    }
    else {
        $(this).find('.info').fadeTo('fast', 1);
        $(this).find('img').fadeTo('fast', 1);
    }
});
$('.subject').mouseleave(function(){
    if ( $(this).hasClass(subject) ) {
        return 0;
    }
    else {
        $(this).find('.info').fadeTo('fast', 0);
        $(this).find('img').fadeTo('fast', 0.8);
    }
});


$('.english-link').click(function(){
    subject = 'english';
    $('.english').find('.info').fadeTo('fast', 1);
    $('.english').find('img').fadeTo('fast', 1);
});
$('.math-link').click(function(){
    subject = 'math';
    $('.math').find('.info').fadeTo('fast', 1);
    $('.math').find('img').fadeTo('fast', 1);
});
$('.electives-link').click(function(){
    subject = 'electives';
    $('.electives').find('.info').fadeTo('fast', 1);
    $('.electives').find('img').fadeTo('fast', 1);
});
$('.history-link').click(function(){
    subject = 'history';
    $('.history').find('.info').fadeTo('fast', 1);
    $('.history').find('img').fadeTo('fast', 1);
});
$('.science-link').click(function(){
    subject = 'science';
    $('.science').find('.info').fadeTo('fast', 1);
    $('.science').find('img').fadeTo('fast', 1);
});
$('.languages-link').click(function(){
    subject = 'languages';
    $('.languages').find('.info').fadeTo('fast', 1);
    $('.languages').find('img').fadeTo('fast', 1);
});
});
4

2 に答える 2

2

使用する：

$(VARIABLE).find('.info, img').fadeTo('fast', 1);

それ以外の：

$(VARIABLE).find('.info').fadeTo('fast', 1);
$(VARIABLE).find('img').fadeTo('fast', 1);

.english-linkこれは、クリック.math-linkなどに一般的に使用できます。

$('[class$=-link]').click(function(){
   subject = $(this).attr('class').replace("-link","");
   $('.'+ subject ).find('.info, img').fadeTo('fast', 1);
});
于 2013-03-19T14:35:20.270 に答える
2

JavaScript の関数は次のようになります。

function myFunction(myParameter, mySecondParameter)
    console.log('You can now use data that was passed to the function through ' + myParameter);
}

var passAVariable = 5;
myFunction('passingastring',passAVariable);

これを試して：

$('.languages-link').click(function(){
    yourfunction('languages', true);
});

function yourfunction(subject, on){
    if ( on ) {
        $('.' + subject).find('.info, img').fadeTo('fast', 1);
    } else {
        $('.' + subject).find('.info').fadeTo('fast', 0);
        $('.' + subject).find('img').fadeTo('fast', 0.8);
    }
}
于 2013-03-19T14:36:48.150 に答える