隐藏特定 Jquery UI 微调器的微调器按钮
Hiding spinner buttons for a specific Jquery UI spinner
我有一个只读 JQuery UI 微调器,我想禁用或隐藏旋转按钮。
我从之前的问题中看到,如果我想隐藏所有微调按钮,我可以使用:
$('.ui-spinner .ui-spinner-button').css('display','none');
而且效果很好。
但是如何只过滤一个特定元素?
我试过了
$('#specifcElement a.ui-spinner-button').css('display','none');
还有
$('.ui-spinner specificElement.ui-spinner-button').css('display','none')
没有成功。
微调器在初始化时包装元素,它看起来像这样:
<span class="ui-spinner ui-corner-all ui-widget ui-widget-content" style="display: none;">
<input id="spinner" name="value" class="spin ui-spinner-input" autocomplete="off" role="spinbutton">
<a tabindex="-1" aria-hidden="true" class="ui-button ui-widget ui-spinner-button ui-spinner-up ui-corner-tr ui-button-icon-only" role="button">
<span class="ui-button-icon ui-icon ui-icon-triangle-1-n"></span>
<span class="ui-button-icon-space"> </span>
</a>
<a tabindex="-1" aria-hidden="true" class="ui-button ui-widget ui-spinner-button ui-spinner-down ui-corner-br ui-button-icon-only" role="button">
<span class="ui-button-icon ui-icon ui-icon-triangle-1-s"></span>
<span class="ui-button-icon-space"> </span>
</a>
</span>
因此,要隐藏微调器对象,我们可以 select 文本字段,然后 select 它是父元素。
考虑以下几点:
$(function() {
$(".spin").spinner();
$("#spinner-2").parent().add("label[for=spinner-2]").hide();
});
.spin-wrap {
width: 340px;
}
.spin-wrap .ui-spinner {
margin-bottom: 3px;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="spin-wrap">
<label for="spinner-1">Select value 1:</label>
<input id="spinner-1" name="value[1]" class="spin">
<label for="spinner-2">Select value 2:</label>
<input id="spinner-2" name="value[2]" class="spin">
<label for="spinner-3">Select value 3:</label>
<input id="spinner-3" name="value[3]" class="spin">
</div>
在这里您可以看到 $("#spinner-2")
只是 selecting input
元素。然后我使用 .parent()
到 select 微调器本身。我还使用 .add()
将 label
元素添加到对象中,因此它也被隐藏了。
我有一个只读 JQuery UI 微调器,我想禁用或隐藏旋转按钮。
我从之前的问题中看到,如果我想隐藏所有微调按钮,我可以使用:
$('.ui-spinner .ui-spinner-button').css('display','none');
而且效果很好。
但是如何只过滤一个特定元素?
我试过了
$('#specifcElement a.ui-spinner-button').css('display','none');
还有
$('.ui-spinner specificElement.ui-spinner-button').css('display','none')
没有成功。
微调器在初始化时包装元素,它看起来像这样:
<span class="ui-spinner ui-corner-all ui-widget ui-widget-content" style="display: none;">
<input id="spinner" name="value" class="spin ui-spinner-input" autocomplete="off" role="spinbutton">
<a tabindex="-1" aria-hidden="true" class="ui-button ui-widget ui-spinner-button ui-spinner-up ui-corner-tr ui-button-icon-only" role="button">
<span class="ui-button-icon ui-icon ui-icon-triangle-1-n"></span>
<span class="ui-button-icon-space"> </span>
</a>
<a tabindex="-1" aria-hidden="true" class="ui-button ui-widget ui-spinner-button ui-spinner-down ui-corner-br ui-button-icon-only" role="button">
<span class="ui-button-icon ui-icon ui-icon-triangle-1-s"></span>
<span class="ui-button-icon-space"> </span>
</a>
</span>
因此,要隐藏微调器对象,我们可以 select 文本字段,然后 select 它是父元素。
考虑以下几点:
$(function() {
$(".spin").spinner();
$("#spinner-2").parent().add("label[for=spinner-2]").hide();
});
.spin-wrap {
width: 340px;
}
.spin-wrap .ui-spinner {
margin-bottom: 3px;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="spin-wrap">
<label for="spinner-1">Select value 1:</label>
<input id="spinner-1" name="value[1]" class="spin">
<label for="spinner-2">Select value 2:</label>
<input id="spinner-2" name="value[2]" class="spin">
<label for="spinner-3">Select value 3:</label>
<input id="spinner-3" name="value[3]" class="spin">
</div>
在这里您可以看到 $("#spinner-2")
只是 selecting input
元素。然后我使用 .parent()
到 select 微调器本身。我还使用 .add()
将 label
元素添加到对象中,因此它也被隐藏了。