如何使用JavaScript去除加号按钮

Question

如何使用JavaScript去除加号按钮

3

我正在从数据库获取带有值的输入字段。请参见以下代码：

<input type="text" class="input-medium" name="demoname" id="demo_1" value="txt1"/>
<button type="button" class="btn id="plus_1"><span class="icon" id="add1">Plus</span> </button>
<input type="text" class="input-medium" name="demoname" id="demo_2" value="txt2"/>
<button type="button" class="btn id="plus_2"><span class="icon " id="add2">Plus</span></button>
<input type="text" class="input-medium" name="demoname" id="demo_3" value="txt3"/>
<button type="button" class="btn id="plus_3"><span class="icon " id="add3">Plus</span></button>

现在，我需要第一个加号按钮在页面打开时显示。我希望其余的加号按钮隐藏。

从数据库获取的输入将是n个数字。因此，每当有新数据来自数据库时，它也只需显示第一个加号按钮。其他按钮必须隐藏。

输入字段是动态创建的。

- user3440176

3个回答

0

使用CSS

.btn {
    display: none;
}
.btn:first-of-type {
    display: inline;
}

http://jsfiddle.net/7kyCL/

- Max

1

或者只需使用.btn:not(:first-of-type) { display: none; }。 - dsgriffin

更好的是，null的版本不会与您希望应用于按钮的任何“block”或“inline-block”发生冲突。 - Max

0

首先，您需要关闭类引号。我已经创建了一个带有ID的div来放置它们。

这是HTML和脚本的代码：

<html>
<body>
<div id="buttonArea">
<input type="text" class="input-medium" name="demoname" id="demo_1" value="txt1"/>
<button type="button" class="btn" id="plus_1"><span class="icon" id="add1">Plus</span> </button>
<input type="text" class="input-medium" name="demoname" id="demo_2" value="txt2"/>
<button type="button" class="btn" id="plus_2"><span class="icon " id="add2">Plus</span></button>
<input type="text" class="input-medium" name="demoname" id="demo_3" value="txt3"/>
<button type="button" class="btn" id="plus_3"><span class="icon " id="add3">Plus</span></button>
</div>

<script type="text/javascript" src="//code.jquery.com/jquery-latest.min.js"></script>
<script>
$('#buttonArea button:not(:first)').hide()
</script>
</body>
</html>

- Srulis

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Felix · Accepted Answer

你缺少了"来关闭按钮的类：

<button type="button" class="btn" id="plus_1">
// ---------------------------  ^ here

然后，您可以默认地应用CSS来隐藏所有类为btn的按钮：

.btn {
    display: none;
}

然后使用 .first() 来显示第一个按钮：

$('.btn').first().show();

或者 :first 选择器：

$('.btn:first').show();

如果您喜欢纯jQuery解决方案，您可以使用以下代码：

。

$('.btn').hide().first().show();

如果您想使用纯CSS方法，则：

.btn:not(:first-of-type) { 
    display: none; 
}