Question

我对jQuery很新，我之前从未真正玩过灯箱。

但是我被问到我是否可以为愚人节做点什么工作，我愚蠢地说是，因为我觉得它比实际上更容易，现在我正在努力。

我会告诉您要求的内容。

1 - Homepage Banner > Click
2 - On Click a lightbox pops up "Speak your search term"
3 - Click Button To Speak - 5 seconds later "Sorry, we can't hear you, Shout"
4 - Click Button To Shout - "April Fools - Here's a promo code for 10% off. XXXXXX"

我已完成最后3个步骤 - 不确定它们是否可以做得更好，但我在这里摆弄它们：http://jsfiddle.net/C8f3P/1/

我想我真正想问的是，如何在点击横幅后将所有这些添加到灯箱中？实际上还有灯箱吗？

注意我刚刚在JSFiddle中嘲笑了一些东西，它看起来不像：）

Answer 1

我喜欢它！

我们有一个记录按语音搜索的设置。当这个人停下来。提交。

此解决方案仅适用于Chrome ...

<input type="search" name="q" value="" id="searchInputField" placeholder="WHAT CAN WE FIND FOR YOU?" x-webkit-speech="">

<script>
$(document).ready(function() {
    $('#searchInputField').bind('webkitspeechchange',function() {
        $(this).parent('form').submit(function( event ) {
                  alert( "Speak up I can't hear you!" );
             event.preventDefault();
            });
    });
});
</script>

我改变了这个以提醒你。也许它会有所帮助。

如果您使用的是Chrome，那么这将有效。确保你的手机记录了初始响应......它应该是无价的。

也许隐藏某个div中的输入或者将它从屏幕上移除。只是一些想法。

但这听起来很有趣。我可能会对我的开发团队做一些诡计。感谢您鼓励这种不正常的行为：）

祝你好运！

Answer 2

这是我的演绎/重构，可能对你有所帮助。然而，你问的问题充其量是令人困惑的，我不知道如何具体回答它。希望这段代码有所帮助。

<强> JS Fiddle

$(document).ready(function() {
    var state = 0;
    var div = $('#fool');
    var content = $('#fool .content');
    var button = $('#fool .button');
    var waiting_html = $('#waiting-content').html();

    function nextStep() {
        var html;

        state++;

        html = $('#step' + state + '-content').html();
        content.html(html);

        div.removeClass('step1 step2 step3').addClass('step' + state);

        if (state >= 3) {
            button.off('click').hide();
        } else {
            button.show();
        }
    }

    $("#fool .button").on('click', function(e) {
        e.preventDefault();
        content.html(waiting_html);
        button.hide();
        setTimeout(nextStep, 5000); // Pretend we are recording.
        return false;
    });

    nextStep();
});

HTML

<div id="fool">
    <p class="content"></p>
    <a href="#" class="button"><strong>click</strong> to start recording</a>
</div>

<script id="waiting-content" type="text/html">Recording...</script>
<script id="step1-content" type="text/html">Speak your search term</script>
<script id="step2-content" type="text/html">Sorry, we can't hear you, Shout</script>
<script id="step3-content" type="text/html">April Fools - Here's a promo code for 10% off. XXXXXX</script>

Lightbox具有更多jQuery功能？

2 个答案: