Javascript - 更改变量

Question

我正在尝试构建一个页面，该页面将包含 Twitter 搜索结果的滚动列表（使用 twitter.search for jQuery）。用户应该能够通过单击按钮来更改搜索词（因此，单击“Apple”会将搜索词更改为“Apple”。

我正在使用一个变量来设置搜索词。将该变量设置为文本字符串（即 searchText = "Pineapple";）有效。但是当我尝试使用按钮更改变量时，什么也没有发生。

//edit - 按钮似乎没有改变变量。想法？谢谢。

<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 函数的信息。