Question

我是jQuery的新手，并不是很擅长创建变量和函数，但我想让我的代码更精简，更“优雅”。

目前，我的整个jQuery代码如下所示：

$(document).ready(
    $('div.pane').scrollTo( 0 ),
    $.scrollTo( 0 ),
    $.localScroll({ duration:400,})
    );

（scrollTo / localScroll是两个插件。）

var gom = function (){$('#content').children().animate( {opacity: 0.4}, 200); }
var visa = function () {animate({opacity: 1 }, 400);}

$('#ntop').click(function (){
    gom();
});

$('#nmind').click(function (){
    gom();
    $('#secmind').animate({opacity: 1 }, 400);
});

$('#nheart').click(function (){
    gom();
    $('#secheart').animate({opacity: 1 }, 400);
});

$('#nhands').click(function (){
    gom();
    $('#sechands').animate({opacity: 1 }, 400);
});

$('#nfeet').click(function (){
    gom();
    $('#secfeet').animate({opacity: 1 }, 400);
});

$('#foot').click(function (){
    gom();
});

$('#secmind').mouseenter( function(){
    if($('#secmind').css('opacity') < '1') {
    gom();
    $('#secmind').animate({opacity: 1 }, 400); } 
});

$('#secheart').mouseenter( function(){
    if($('#secheart').css('opacity') < '1') {
    gom();
    $('#secheart').animate({opacity: 1 }, 400); } 
});

$('#sechands').mouseenter( function(){
    if($('#sechands').css('opacity') < '1') {
    gom();
    $('#sechands').animate({opacity: 1 }, 400); } 
});

$('#secfeet').mouseenter( function(){
    if($('#secfeet').css('opacity') < '1') {
    gom();
    $('#secfeet').animate({opacity: 1 }, 400); } 
});

这是HTML：

         <div id="wrapper">
            <img src="b6.png" id="imgsimon" />
            <a name="sectop"></a>


        <div id="nav">
        <ul>
            <li id="ntop"> <a href="#sectop">Top</a> </li>
            <li id="nmind"> <a href="#secmind">Inspiration</a> </li>
            <li id="nheart"> <a href="#secheart">Interests</a> </li>
            <li id="nhands"> <a href="#sechands">Work</a> </li>
            <li id="nfeet"> <a href="#secfeet">Aspirations/Anticipations</a> </li>
            <li id="foot"> <a href="#secfooter">Contact Me!</a> </li>
        </ul>

    </div> 
    <div id="rubrik">
    <h1>Header 1</h1>
    <p>Hey!</p>
    </div>

    <div id="content">

        <div class="text" id="secmind"><a name="secmind"></a>
            <h2>Inspiration</h2>
            <p>Bla bla</p>
        </div>  

        <div class="text" id="secheart"><a name="secheart"></a>
            <h2>Interests</h2>
            <p>Bla bla bla bla bla</p>
        </div>  


        <div class="text" id="sechands"><a name="sechands"></a>
            <h2>Work</h2>
            <p>Bla bla bla bla</p>
        </div>  

        <div class="text" id="secfeet"><a name="secfeet"></a>
            <h2>Aspirations / Anticipations</h2>
            <p>Bla bla bla</p>
        </div>

    </div>
    <div id="footer"><a name="secfooter"></a>
            <h2>Contact me!</h2>
            <p>Bla bla</p>
            <p>Bla bla</p>
    </div>
</div>

“gom”功能正常，但我不知道“签证”的问题是什么。另外，我假设您可以更平滑地编写if函数，因此您只需要写入一次，而不必为每个id重复它。

欢迎任何帮助，网页工作得很好，我只想知道如何以更好，更快，更优雅的方式写这个。非常感谢！

Answer 1

您可以使用.each()

Documentation

Answer 2

在visa函数中，没有选定的元素可以设置动画：

这个：

 var visa = function () {animate({opacity: 1 }, 400);}

应该是：

 var visa = function () { $('anElement').animate({opacity: 1 }, 400) }

您也可以尝试选择锚元素，而不是分别选择每个元素：

$('ul li a').click(function(e){
    e.preventDefault(); // prevents default action of the anchor link
    gom();
    var id = $(this).attr('href').remove('#',''); 
    $('#' + id).animate({opacity: 1 }, 400);
});

$('#content div').mouseenter( function(){
    if($(this).css('opacity') < '1') {
    gom();
    $(this).animate({opacity: 1 }, 400); } 
});

在jQuery中使用if语句创建函数

2 个答案: