Question

关于jquery mobile按钮的问题！

<a href="#" data-role="button" data-theme="a" id="record" onclick="video_files();">录音</a>

比如我点击这个按钮，后就开始录音，然后这个按钮变成 名字为 停止录音 的按钮 点击后停止录音

录音和停止录音的方法都写好了 然后 这个按钮怎么写？ 因为不想写两个按钮，所以这样动态改变

Answer 1

其实我们只需要一个方法，一个按钮，我们通过识别这个按钮的状态得知是录音还是停止，比如隐藏一个 data-status 属性值来记住当前是哪个状态，HTML5 允许我们添加任意的以 data- 开头的属性，当我们用两个事件处理方法时需要切换当前绑定的 click 事件处理函数：

$('#record').on('click', startClicked);

function startClicked() {
   $('#record').text('停止');
   $('#record').off('click', startClicked);
   $('#record').on('click', stopClicked);
}

function stopClicked() {
   $('#record').text('录音');
   $('#record').off('click', stopClicked);
   $('#record').on('click', startClicked);
}

 只有一个 click 事件函数时：

$('#record').on('click', btnClicked);

function btnClicked() {
   if ($('#record').attr('data-status') === 'started') {
       $('#record').text('录音');
       $('#record').attr('data-status', 'stopped');
       // 停止录音
   } else {
       $('#record').text('停止');
       $('#record').attr('data-status', 'started');
       //开始录音。
   }
}