jquery - 切换按钮旁边的文本

Question

我有一个表格，其中每个单元格都有一个按钮，代码如下：

<span class = "button"><input id="button" type="button">

我想在它的右侧显示一些文本，当单击按钮时会切换。所以它会从

[] 文本

[] 其他文字

无需重新加载页面，也不会切换其他单元格中的文本。我将如何使用 jQuery（或其他东西，如果有更好的方法）来做到这一点？

Answer 1

<span class="button">
    <span class="text">Text</span>
    <input id="button" type="button" />
</span>

JS：

$('.button input[type="button"]').on('click', function() {
    $(this).prev('.text').toggle();
});

Answer 2

我想你是这样的：

http://jsbin.com/azepex/1/edit

我遵循了html的这种结构：

<span class = "button">
    <input id="button" type="button" value='toggle text' >
    <span>text.</span>
</span>

这是js：

$(function(){
  $('.button input[type="button"]').toggle(function(){
    $(this).next('span').text('Other text.');
  }, function(){
    $(this).next('span').text('text.');
  }); 
});

只需查看上面的 jsbin 链接

Answer 3

HTML

<span class="button">
    <input id="button" type="button" value="save">
    <span id="show-text">Text</span>
</span>​

JS

$("#button").toggle(function() {
    $("#show-text").text("Other Text").stop();
}, function() {
    $("#show-text").text("Text").stop();
});​