0

Есть список внутри которого есть ссылки, необходимо по клику по блоку #block получить его значение и сравнить его со значениями которые есть в ссылках, если произошло совпадение показать скрытый блок js-special-message, иначе его спрятать

$('#block').on("click",function(event){
    event.preventDefault();

    var arrLink      = $("ul").find("a"),
        arrCurCity	 = [],
        checkWord 	 = $(this).find("div").text();

    $.each(arrLink, function(i, e){
        arrCurCity.push( $(e).text() );
    })

    altasib_geobase.sc_add_city(event);

    $.each(arrCurCity, function(i, e){
        console.log(checkWord, e);
        if(checkWord.match( new RegExp(e, 'i') ) ){
            $(".js-special-message").hide();
        }
        if(!checkWord.match( new RegExp(e, 'i') ) ){
            $(".js-special-message").show();
            return false;
        }
    })
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <li><a href="">Пермь</a></li>
    <li><a href="">Москва</a></li>
    <li><a href="">Санкт-Петербург</a></li>
    <li><a href="">Брянск</a></li>
    <li><a href="">Тула</a></li>
    <li><a href="">Калуга</a></li>
    <li><a href="">Смоленск</a></li>
    <li><a href="">Орёл</a></li>
    <li><a href="">Белгород</a></li>
    <li><a href="">Воронеж</a></li>
    <li><a href="">Курск</a></li>
    <li><a href="">Рязань</a></li>
    <li><a href="">Тамбов</a></li>
    <li><a href="">Липецк</a></li>
    <li><a href="">Иваново</a></li>
    <li><a href="">Владимир</a></li>
    <li><a href="">Ярославль</a></li>
</ul>
<div id="block">Липецкб Липецкая область</div>

2 ответа 2

-1

$('#block').on("click",function(){
  const $this = $(this),
    thisText = $this.text(),
    $cityLink = $('ul a');
      
  $cityLink.each(function(){
    if(thisText === $(this).text()) {
      $('#js-special-message').show();
    } else {
      $('#js-special-message').hide();
    }
  });
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <li><a href="">Пермь</a></li>
    <li><a href="">Москва</a></li>
    <li><a href="">Санкт-Петербург</a></li>
    <li><a href="">Брянск</a></li>
    <li><a href="">Тула</a></li>
    <li><a href="">Калуга</a></li>
    <li><a href="">Смоленск</a></li>
    <li><a href="">Орёл</a></li>
    <li><a href="">Белгород</a></li>
    <li><a href="">Воронеж</a></li>
    <li><a href="">Курск</a></li>
    <li><a href="">Рязань</a></li>
    <li><a href="">Тамбов</a></li>
    <li><a href="">Липецк</a></li>
    <li><a href="">Иваново</a></li>
    <li><a href="">Владимир</a></li>
    <li><a href="">Ярославль</a></li>
</ul>
<div id="block">Липецкб Липецкая область</div>
<div id="js-special-message"></div>

2
  • ваш вариант не подходит потому что сам блок id="block" может содержать большое кол-во текста, поэтому надо проверять не на точное совпадение, а делать поиск подстроки 23 авг 2017 в 20:41
  • @кверти, используй тогда IndexOf вместо ==
    – Grundy
    24 авг 2017 в 6:26
-1

Возможно такое решение подойдёт https://jsbin.com/fivihirato/edit?html,css,js,output

html:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <ul>
        <li><a href="">Пермь</a></li>
        <li><a href="">Москва</a></li>
        <li><a href="">Санкт-Петербург</a></li>
        <li><a href="">Брянск</a></li>
        <li><a href="">Тула</a></li>
        <li><a href="">Калуга</a></li>
        <li><a href="">Смоленск</a></li>
        <li><a href="">Орёл</a></li>
        <li><a href="">Белгород</a></li>
        <li><a href="">Воронеж</a></li>
        <li><a href="">Курск</a></li>
        <li><a href="">Рязань</a></li>
        <li><a href="">Тамбов</a></li>
        <li><a href="">Липецк</a></li>
        <li><a href="">Иваново</a></li>
        <li><a href="">Владимир</a></li>
        <li><a href="">Ярославль</a></li>
    </ul>
    <div id="block">Липецкб Липецкая область</div>
    <div id="js-special-message">Супер-сообщение</div>

css:

#js-special-message{
  display: none;
}

#block{
  cursor: pointer;
}

js:

var $message = $('#js-special-message');
$('#block').on('click', function(e){
    //из объекта события извлекаем текст из элемента 
    //на котором возникло событие (target), то есть из блока
    var text = e.target.innerText;
    //проходим по элементам списка
    $('ul li').each(function(index, elem){
      //извлекаем текст из элемента списка
      var linkText = elem.innerText;
      //на его основе формируем регулярку c флагом 'i'
      //для проверки без учёта регистра
      var re = new RegExp(linkText, 'i');
        //сопоставляем текст из блока с регуляркой
        if(text.match(re)){
            //если сопоставление сработало:
            //показываем сообщение и покидаем цикл с помощью return false
            $message.show();
            return false;
        } else {
            //иначе скрываем сообщение
            $message.hide();
        }
    });
});
4
  • Стоит помимо ссылки оставлять код решения, т.к. ссылка может быть в последствии удалена. 24 авг 2017 в 6:34
  • если используешь регулярки, зачем приводит текст к нижнему регистру?
    – Grundy
    24 авг 2017 в 6:43
  • осталось только ключ i в регулярку добавить
    – Grundy
    24 авг 2017 в 6:48
  • и добавь пояснение, что и как делает твой код
    – Grundy
    24 авг 2017 в 6:53

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.