Question

如何更改按钮旁边的文本？除了这些按钮消息外，其他所有功能都正常。谢谢你的帮助。

<!DOCTYPE html PUBLIC "><head>
<script type="text/javascript" src="js/jquery-1.4.min.js"></script>
<script type='text/javascript'>
  var fontSizes = [14, 16]
$(function(){
  $('#PlusMinus').click(function() {
      if($(this).val() == "+") {
      $('#OurText').css('fontSize', fontSizes[1] + 'pt');
      $(this).val("-");
      }else {
        $('#OurText').css('fontSize', fontSizes[0]+ 'pt');
        $(this).val("+");
      }
   });
});       
<!--NOT WORKING-->
    $("button").click(function () {
    $("h6").toggle();
    });
</script>
</head>
<!--NOT WORKING-->
    <h6>
      <input type='button' value='+' id='PlusMinus'/>
        Larger Text</h6>
    <h6 style="display: none">Smaller Text</h6>
<!--TEXT RESIZES-->
<p id="OurText">My Text!!!</p>
</body>
</html>

BUTTON STATE'消息应在较大文本和较小文本之间切换

[+] Larger Text

[-] Smaller Text

Answer 1

而不是

$(this).val("-");

使用

$(this).attr('value','+');

Answer 2

尝试

首先纠正html

<input type='button' value='+' id='PlusMinus'/>
    <h6>Larger Text</h6>
    <h6 style="display:none" >Smaller Text</h6>

然后是jquery

 $("input[type=button]").click(function () {
    if($(this).val() == '-')
       $(this).val("+");
    else $(this).val("-");
    $("h6").toggle();
    });

}）;

参见 Demo

Answer 3

一个问题是你有：

$("button").click(function (){});

...但您的HTML显示：

<input type="button" id="PlusMinus" />

您不想选择button元素。您需要一个类型为input元素的按钮。试试这个：

$(':button').click( function(){} );

...假设您不打算按ID选择按钮。请注意，这可以选择多个元素，因此ID方法（或其他一些方法可以唯一识别您想到的按钮）将更可取：

$('#PlusMinus').click( function(){} );

Answer 4

这对我有用：

<!DOCTYPE html PUBLIC "><html>
<head>
<script type="text/javascript" src="jquery-1.4.min.js"></script>
<script type="text/javascript">
var fontSizes = [14, 16]
$(function(){
$('#PlusMinus').click(function() {
    if($(this).val() == "+") {
        $('#OurText').css('fontSize', fontSizes[1] + 'pt');
        $(this).val("-");
    }else {
        $('#OurText').css('fontSize', fontSizes[0]+ 'pt');
        $(this).val("+");
    }
    $("body h6").toggle();
});
});
</script>
</head>
<input type='button' value='+' id='PlusMinus'/>
<h6>Larger Text</h6>
<h6 style="display: none">Smaller Text</h6>
<!--TEXT RESIZES-->
<p id="OurText">My Text!!!</p>
</body>
</html>

我所做的改变是：

更改了$（“h6”）。toggle（）; to $（“body h6”）。toggle（）;并将其移至$（'＃PlusMinus'）。点击功能

将按钮移出“较大文本”h6元素

添加＆lt; html＆gt;标签在顶部

删除了“不工作”评论;）

jQuery，按钮消息不会改变

4 个答案: