隐藏特定 Jquery UI 微调器的微调器按钮答案

【问题标题】：Hiding spinner buttons for a specific Jquery UI spinner隐藏特定 Jquery UI 微调器的微调器按钮
【发布时间】：2023-03-08 03:20:01
【问题描述】：

我有一个只读的 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')

没有成功。

【问题讨论】：

您的选择器有效或样式未应用？
样式未应用，选择器为只读，但微调器按钮未隐藏且正常工作。
尝试另一种 jQuery 方法，例如 .addClass()。使用 display:none 在样式表上定义一个 .hidden 类并使用 $('.ui-spinner specificElement.ui-spinner-button').addClass('hidden');
谢谢，我做到了，微调按钮还在。我已经定义了 .hidden { display: none;我用过 $('.ui-spinner #specificElement.ui-spinner-button').addClass('hidden');或 $('.ui-spinner specificElement.ui-spinner-button').addClass('hidden')。不开心！
所以这不是一个 jQuery 问题，你有一个 CSS 问题。为了帮助您，需要更多信息。您可以编辑问题并发布您的样式表吗？也许这也有帮助：stackoverflow.com/questions/20663712/…

标签： jquery css jquery-ui spinner readonly-attribute

【解决方案1】：

以后最好提供Minimal, Reproducible Example。

Spinner 在初始化时包装元素，它看起来像这样：

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

所以要隐藏微调器对象，我们可以选择文本字段，然后选择它的父元素。

考虑以下几点：

$(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") 只是选择了input 元素。然后我使用.parent() 来选择微调器本身。我还使用.add() 将label 元素添加到对象中，因此它也被隐藏了。

希望这会有所帮助。

【讨论】：