如何使用按钮切换文本?

时间:2014-08-04 15:25:39

标签: javascript jquery

如果按下向上箭头按钮,我想用 100%替换文本未评级;如果按下向下按 0%箭头按钮。我想用js或jQuery实现这一点我只是不知道如何去做。

<div class="votesystem">

  <input type="checkbox" class="votes" role="button">

    <label for="voteup" onclick=""><span class="voteswitch"> <img src="images/voteup.png" data-value="up"/><br /><br /></span>

<p>Not rated</p>

     <span class="voteswitch"><img src="images/votedown.png" data-value="down" /></span> </label>     

 </div>

更新

好的,我将详细说明问题以消除困惑。我发现一些代码包含了我想要的类似效果,除了它隐藏了文本:测试当我想在单击复选框时用另一个单词替换文本测试时。

此外,我想将其设为单选按钮而不是核对表,以便根据所选按钮更改文本。感谢您一直以来的帮助。

<label>Chanage text</label>
<input type="checkbox" id="test">

<div id="content" class="hide">
  <p>testing</p>
</div>

和jquery

$(document).ready(function(){
    $('.hide').hide();
    $('#test').click(function(){
        $('#content').toggle();
    });        
});

1 个答案:

答案 0 :(得分:1)

试试这个,

为您的HTML提供ID或类(某种选择器),然后使用jQuery / JavaScript根据键盘按键更改元素HTML。

您也可以通过Bardyl提到的<p>标记来获取它,但如果您在某些时候可能有多个<p>标记,那么这是一个坏主意。

<p id="foo">Not rated</p>

<script>
$("#foo").keypress(function(event) {
  if (event.which == 38) {
     $("#foo").html("100%");
  } else if (event.which == 40) {
     $("#foo").html("0%");
  }
});
</script>