Jquery 3 выберите с условием по индексу, чтобы показать или отобразить содержимое

Question

У меня есть список, который нужно выбрать, найти по индексу и получить значение. из первых 3 выберите по индексу (). Если 1 или 3 индекс имеет значение> = 34, то текст будет отображаться, если не будет скрыт. Пожалуйста, просмотрите мое изображение, поймете больше

Это не работает, пожалуйста, просмотрите прикрепленный файл с изображением

введите описание изображения здесь

//index , of first 3 select tag
var index = $(this).index();

var list_arr = [0, 1, 2];

var is_exits = $.inArray(index, list_arr);

if (fabric_value != null) {
  if (fabric_value >= 34 && is_exits == 0 || is_exits == 1 || is_exits == 2) {
    $(".extra_fabric_10dollar").show();
  } else {
    $(".extra_fabric_10dollar").hide();
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select>
  <option>1</option>
  <option>34</option>
  <option>78</option>
</select>
<select>
  <option>5</option>
  <option>34</option>
  <option>55</option>
</select>
<select>
  <option>15</option>
  <option>34</option>
  <option>88</option>
</select>
<select>
  <option>1</option>
  <option>2</option>
  <option>33</option>
</select>
<span>I am show when select by index meet 0 - 1 - 2 has value larger 34 if less than will hide</span>

Answer 1

Прежде всего: ни одному из ваших элементов не назначено имя класса. Вы пытались показать или скрыть .extra_fabric_10dollar элементы. Вы должны добавить его к <span> для jQuery, чтобы фактически выбрать элемент по вашему выбору:

<span class="extra_fabric_10dollar">I am show when select by index meet 0 - 1 - 2 has value larger 34 if less than will hide</span>

После того, как вы это сделали, используйте следующий код:

$(document).ready(function() {
  $("select").on("change", function() {
    var showNotification = $(this).val() >= 34;
    $(".extra_fabric_10dollar").toggle(showNotification);
  });
});

Этот код включает или выключает нужный элемент классов на основе .val() >= 34 измененного <select>. Поскольку ваш вопрос не прояснил, являются ли эти значения фиксированными или переменными, я установил jQuery селекторное соответствие все <select> с. Если вы хотите сопоставить только первые 3 <select> с, используйте вместо этого $('select:nth-child(-n+3)').on('change',.

Если вы хотите скрыть диапазон по умолчанию при запуске, добавьте следующее CSS:

.extra_fabric_10dollar {
  display: none;
}

Он будет отображаться только при выборе значения, большего или равного 34.