Question

我有一个按钮，当用户点击它时，它意味着在我的表单中显示第一个。我已经使用了jQuery切换，但是当点击按钮时似乎没有发生任何事情，我做错了什么？

＆＃13;

$("#chnagecar").click(function() {
  $("#car").toggle();
});

＆＃13;

#changecar{
  display:none:
}

＆＃13;

<p id ="news">Hello User<input type="button" id="changecar" value="Whst car do you have"></p>
<div id="car">
  <label required>Do you know what car you have? </label>
  <br>
  <br>
  <input type="radio" id="yes" value="yes" />Yes
  <input type="radio" id="no" value="no" />No
  <br>
  <br>
</div>

＆＃13;

Answer 1

您的代码存在一些问题：

<label>不能拥有required属性。
您的jQuery包含拼写错误chnagecar > changecar
你的CSS显示：无：有一个：而不是一个;最后。
您正在尝试切换内联HTML样式，而不是CSS。

好的，现在我们

HTML：

<p id="news">Hello User<input id="changecar" type="button" value=
"What car do you have"></p>

<div id="car">
    <label>Do you know what car you have?</label><br>
    <br>
    <input id="yes" type="radio" value="yes">Yes <input id="no" type="radio"
    value="no">No<br>
    <br>
</div>

CSS：

.hidden {
  display: none;
}

JS：

$("#changecar").click(function() {
  $("#car").toggleClass('hidden');
});

我们现在有一个hidden类'隐藏'一个元素，显示：none;按下按钮时会切换。

工作代码： http://codepen.io/robertspier/pen/bwkLvQ

Answer 2

除了上述评论之外，我还建议从Display属性中删除:。如Firefox CSS Syntax Rules中所述，不需要分号，但这是一种很好的做法。

Answer 3

基本根scaue是您将'changeCar'中的div id名称错误拼写为'chnageCar'。

 $("#changecar").click(function () {
            $("#car").toggle();

        });`

以上将有效。

除此之外，代码还有一些改进建议;

在CSS样式中，它应该是changeCar ID末尾的半冒号而不是冒号。

#changecar{ display:none;}

通过设置display：none，您将隐藏按钮，并且用户无法看到该按钮。我认为此处不需要样式#changecar{ display:none;}，您可以删除它。
在标签中，“required”不是有效的属性。

这是JSFiddle link。

使用jQuery隐藏和显示不在按钮上工作

3 个答案: