Question

我目前正在尝试建立一个有三个按钮的网站，一个是Facebook共享一个，另一个是Twitter，另一个链接到视频。它们被归类为＆＃34; facebook＆＃34;，＆＃34; twitter＆＃34;和＆＃34; play＆＃34;。但是，他们都没有进入我所希望的链接。我有一个外部Javascript文件，但决定只根据建议在我的HTML文件中添加所有内容。我真的不具备JavaScript（只是HTML / CSS）的经验，所有的JavaScript都是OpenSource代码。是否有任何轻微的错误，我完全忽视或不知道？谢谢！

<!DOCTYPE html>
<html>
<head>
    <title>Soma - Share</title>
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css' />
    <link rel="stylesheet" type="text/css" href="share.css" />
    <link type="text/css" rel="stylesheet" media="only screen and (max-width: 600px)" href="mobile.css" />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
</head>
<body>
    <h1>Support Soma with 3 Clicks</h1>
    <div id="container">
        <p id="welcome">
            <b>Hola, rockstar!</b><br /><br />We hope you're having an awesome day. You're here because we know you have influence. When you share something, people pay attention. So, please take a few seconds to spread the Soma love.
            <br /><br />
            <b>Thanks so much,</b>
            <br />
            Mike, Zach and the entire Soma Team
        </p>
        <div id="progress">
            <div class="percent">
                <div class="number">0%</div>
            </div>
        </div>
        <ul id="actions">
            <li>
                <h2>1. Share on Facebook</h2>
                <p>Share Soma with your friends</p>
                <button class="facebook"><span class="facebookSpan">f</span> Share</button>
            </li>
            <li>
                <h2>2. Post on Twitter</h2>
                <p>Hook your following up</p>
                <button class="twitter"><span class="twitterSpan"></span>Tweet</button>
            </li>
            <li>
                <h2>3. Watch our Video</h2>
                <p style = "font-size:13.4999px">Thank you in advance for backing Soma</p>
                <button class="play"><span class = "playSpan"></span>Play</button>          
            </li>
        </ul>
    </div>
    <div id="footer">&copy; Soma 2012</div>
    <script>




(function() {
var clicks = 0;
$('button').on('click', function() {
    clicks++;
    var percent = Math.min(Math.round(clicks / 3 * 100), 100);
    $('.percent').width(percent + '%');
    $('.number').text(percent + '%');
});


$('.facebook').on('click', function() {
    window.open('http://www.facebook.com');

    var w = 580, h = 300,
            left = (screen.width/2)-(w/2),
            top = (screen.height/2)-(h/2);


        if ((screen.width < 480) || (screen.height < 480)) {
            window.open ('http://www.facebook.com/share.php?u=http://bit.ly/somawater', '', 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width='+w+', height='+h+', top='+top+', left='+left);
        } else {
            window.open ('http://www.facebook.com/share.php?u=http://bit.ly/somawater', '', 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width='+w+', height='+h+', top='+top+', left='+left);   
        }

});

$('.twitter').on('click', function() {
    var loc = encodeURIComponent('http://bit.ly/somawater'),
            title = "Beautifully innovative all-natural water filters by Soma — ",
            w = 580, h = 300,
            left = (screen.width/2)-(w/2),
            top = (screen.height/2)-(h/2);

        window.open('http://twitter.com/share?text=' + title + '&url=' + loc, '', 'height=' + h + ', width=' + w + ', top='+top +', left='+ left +', toolbar=0, location=0, menubar=0, directories=0, scrollbars=0');
});

$('.play').on('click', function() {
    window.location.href = "http://kck.st/TH0NAN";
});

});
    </script>   
  </body>
 </html>

Answer 1

你只是缺少一些括号

(function() {
    var clicks = 0;
    $('button').on('click', function() {
        ...
    });

    $('.facebook').on('click', function() {
        ...   
    });

    $('.twitter').on('click', function() {
        ...
    });

    $('.play').on('click', function() {
        ...
    });

})(); // <- Note the extra brackets

将代码放在(function() { ... })()中，您将创建一个函数表达式，然后立即调用它。这被称为IIFE（立即调用的函数表达式）

<强>更新

以下是使用jQuery的document.ready方法的代码。使用这种方法，不需要上述IIFE。

此方法在执行代码

之前等待页面上的所有元素都已加载

$(document).ready(function() {
    var clicks = 0;
    $('button').on('click', function() {
        ...
    });

    $('.facebook').on('click', function() {
        ...   
    });

    $('.twitter').on('click', function() {
        ...
    });

    $('.play').on('click', function() {
        ...
    });

});

单击按钮时按钮不执行任何操作

1 个答案: