click () if ($ ("[id * = 'строка']")) show ()

Question

Я пытаюсь показать некоторые элементы, если нажатая кнопка содержит определенную строку текста c, но мой код распознает только if. Он не отображает «else», даже если нажатая кнопка не содержит строки. Пытаюсь решить с помощью ответов и документации jQuery, но результата не удалось. Может ли кто-нибудь помочь мне понять, в чем моя ошибка?

$('.customize-btn').click(function() {
  if ($("[id*='boat']")) {
      $("#extra-boat").show()
  } else{
      $("#extra-residential").show()
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="customize-btn" id="a-boat">BOAT</button>
<button class="customize-btn" id="a-residential">RESIDENTIAL</button>

<div id="extra-boat" style="display: none">EXTRA BOAT</div>
<div id="extra-residential" style="display: none">EXTRA RESIDENTIAL</div>

Answer 1

Это происходит потому, что внутри if ($("[id*='boat']")) у нас есть объект jQuery, и вы просто проверяете, является ли это истинным значением или нет, что всегда верно. Даже если вы используете if($("[id*='boat']").length), вы все равно получите тот же результат, поскольку при нажатии обеих кнопок эта кнопка присутствует, поэтому длина возвращает 1 в обоих случаях.

Чтобы исправить это, вам нужно проверить, id нажатой кнопки имеет текст boat или не такой:

this.id.indexOf('boat') > -1

Теперь, когда вы нажимаете кнопку BOAT, затем this.id возвращает a-boat и this.id.indexOf('boat') возвращает 2 что> -1, поэтому он входит в оператор if.

Теперь, когда вы нажимаете кнопку RESIDENTIAL, тогда this.id возвращает a-residential, а this.id.indexOf('boat') возвращает -1, что равно - 1 и оценивается как false , поэтому теперь он входит в оператор else.

$('.customize-btn').click(function() {

  console.clear();
  console.log(this.id, this.id.indexOf('boat'));

  if (this.id.indexOf('boat') > -1) {
      $("#extra-boat").show()
  } else{
      $("#extra-residential").show()
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="customize-btn" id="a-boat">BOAT</button>
<button class="customize-btn" id="a-residential">RESIDENTIAL</button>

<div id="extra-boat" style="display: none">EXTRA BOAT</div>
<div id="extra-residential" style="display: none">EXTRA RESIDENTIAL</div>