Скрытие кнопок вращения для конкретного счетчика Jquery UI - PullRequest
Новая
       17

Скрытие кнопок вращения для конкретного счетчика Jquery UI

0 голосов
/ 09 июня 2019

У меня есть только вращающийся пользовательский интерфейс 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')

без успеха.

1 Ответ

1 голос
/ 09 июня 2019

В будущем лучше всего предоставить Минимальный воспроизводимый пример .

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 к объекту, чтобы он тоже был скрыт.

Надеюсь, это поможет.

...