Question

我从数据库获取带有值的输入字段。见下面的代码：

<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号。因此，每当有任何新数据来自数据库时，它也必须只显示第一个加号按钮。其他按钮必须隐藏。

输入字段是动态创建的。

Answer 1

您错过"以关闭按钮类：

<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; 
}

Answer 2

首先你需要关闭课程报价。我已经创建了一个div和ID来放置它们。

在这里，您可以使用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>

Answer 3

使用css

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

http://jsfiddle.net/7kyCL/

如何使用javascript删除加号按钮

3 个答案: