Javascript - 更改变量

Question

我正在尝试构建一个页面,其中包含Twitter搜索结果的滚动列表(使用twitter.search for jQuery).用户应该能够通过单击按钮更改搜索词(因此,单击"Apple"会将搜索词更改为"Apple".

我正在使用变量来设置搜索词.将该变量设置为文本字符串(即searchText ="Pineapple";)有效.但是当我尝试使用按钮更改变量时,没有任何反应.

//编辑 - 按钮似乎没有改变变量.思考？谢谢.

<script type="text/javascript">
//set default value for searchText
    searchText = "Pineapple";

//this sets up our Twitter stream
    $(document).ready(function() {

        $('#twitter-stream').twitterSearch({ 
        term: searchText, 
        // no fade 
        animOut: { opacity: 1 }, 
        avatar:  false, 
        anchors: false, 
        bird:    false, 
        colorExterior: 'white', 
        colorInterior: 'white', 
        pause:   true, 
        time:    false, 
        timeout: 2000 
        });
    });
</script>

<script type="text/javascript">
    $("#button-container").on("button", "click", function( e ) {
        searchText = $(this).text();
    });
</script>

<div id="twitter-stream" title="Mouse away to un-pause">
</div>

<div id="button-container">
<button class="button"> Apple </button>
</div>

<button onclick="alert(searchText);">Click me!
</button>

Answer 1

这段代码效率很低,您可以使用jQuery定义一个处理按钮的所有单击事件的函数,而不是4个几乎相同的函数.

使用jQuery代表您的活动.on:

$("#someContainerDiv").on("button", "click", function( e ) {
    searchText = $(this).text();
});

这样就不需要一个值数组了,因为你只需要使用按钮本身的innerText.

参考

这里有关于jQuery的一些信息on,这里有一些关于delegate它取代的函数的信息.