Question

我正在阅读一本pdf书来学习jQuery。下面的代码应根据本书创建2个按钮，但在我的情况下，它只是创建它的简单文本而不是按钮。我已经重新检查了这本书，看看我是否遗漏了任何东西。

我是新手，所以这对你们来说似乎是一个愚蠢的问题。

代码：

 <div id="switcher">
<div class="label">Style Switcher</div>
<div class="button" id="switcher-large">Increase Text Size</div>
<div class="button" id="switcher-small">Decrease Text size</div>
</div>

提前致谢。

Answer 1

你必须自己“看起来”像一个按钮。最简单的方法是使用CSS。

.button {
background-color:red;
width:100px;
height:30px;
color:white;
padding:4px;
margin:10px;
}
.button:hover {
font-weight:bold;
cursor:pointer;
}

这可能是一种非常基本的做事方式。

Answer 2

你只是在div标签上给它们类属性。按钮由按钮标签创建。这是你如何做到的。

<div id="switcher">
    <div class="label">Style Switcher</div>
    <button class="button" id="switcher-large">Increase Text Size</button>
    <button class="button" id="switcher-small">Decrease Text size</button>
</div>

Answer 3

如果您使用的是jquery UI，则需要通过javascript：

应用该按钮

$(".button").button();

Answer 4

通过jQuery，wrapInner函数可以将文本转换为按钮，如果这是你需要的：

您的HTML：

<div id="switcher">
  <div class="label">Style Switcher</div>
  <div class="button" id="switcher-large">Increase Text Size</div>
  <div class="button" id="switcher-small">Decrease Text size</div>
</div>

jQuery的：

jQuery(document).ready(function(){

  $('.button').wrapInner('<button />');

});

当然，您需要添加更多内容 - 要执行的某些onClick事件，您打算执行的操作，或者在单击按钮时执行的某些其他jQuery，例如： $(button').on("click",function() {...

http://api.jquery.com/wrapInner/

按钮没有被创建

4 个答案: