2015-02-20 3 views
0

Я пытаюсь проверить, содержит ли элемент, который вы нажали, определенный текст, и если удалите его.Если el содержит этот текст, удалите из него эту строку?

<ul class="filter option-set dropdown-menu" role="menu" aria-labelledby="dropdownMenu1" data-filter-group="Agencies"> 
    <li><a class="btn btn-default btn-lg" href="#filter-client-any" data-filter-value="">All agencies</a></li> 

    <li><a id="filter-a" class="btn btn-default btn-lg" href="#filter-agency-a" data-filter-value=".A">A</a></li> 
    <li><a id="filter-z" class="btn btn-default btn-lg" href="#filter-agency-z" data-filter-value=".Z">Z</a></li> 
    <li><a id="filter-c" class="btn btn-default btn-lg" href="#filter-agency-c" data-filter-value=".c">C</a></li> 
    <li><a id="filter-h" class="btn btn-default btn-lg" href="#filter-agency-h" data-filter-value=".h">H</a></li> 
</ul> 

$(document).on('click touchend', '.filter a', function(event) { 
    event.preventDefault(); 
    var self = $(this); 
    if(self.html().indexOf("All ")!=-1) 
    self.html(self.html().replace("All ", "")); 
}); 

Приведенный выше код дает мне: Uncaught TypeError: undefined is not a function

+0

Никогда * никогда * использовать '.html()' для управления элементами DOM - он преобразует элементы в текст, а затем обратно в узлы, уничтожая любые другие изменения или обработчики событий, зарегистрированные на этих узлах. Это нормально для создания новых элементов. – Alnitak

ответ

0

Вам нужно заменить текст.

Попробуйте это.

$("a").on("click", function(){ 
    var self = $(this); 
    if(self.html().indexOf("All")!=-1) 
    self.html(self.html().replace("All", "")); 
}); 

Или вы можете пойти с $("a:contains('All')") селектором.

$("a:contains('All')").on("click", function(){ 
    var self = $(this); 
    self.html(self.html().replace("All", "")); 
}); 
+0

Мне все еще нужно проверить, есть ли у него это или нет. –

+0

Зачем вам нужно его проверять, он заменит его, если он есть, иначе он не выкинет ошибку. – void

+0

См. Обновленный ответ, если вы хотите все равно проверить ... – void

1

Вы должны фактически установить новое содержание текста, кроме того, что ваше состояние, чтобы проверить существующие строки не может работать, как это.

if($(this).text().indexOf('All ') > -1) { 
    $(this).text(function(_, text) { 
     return text.replace(/All\s+/g, ''); 
    }); 
} 
+0

это все еще в пределах if? –

1

jQuery.contains() is used to Check to see if a DOM element is a descendant of another DOM element.

вы должны использовать родной match() или любым другим способом. Попробуй это.

<a href="#">All works</a> 
<script type="text/javascript"> 
$(document).ready(function() { 
    $("a").on("click", function() { 
     if ($(this).text().match("All ").index != -1) { 
      $(this).text($(this).text().replace(/All /g, '')); 
     } 
    }); 
}); 
</script> 

Отрывок

\t $(document).on('click touchend', '.filter a', function(event) { 
 
\t \t var self = $(this); 
 
\t \t if (self.html().indexOf("All ") != -1) 
 
\t \t \t self.html(self.html().replace("All ", "")); 
 
\t });
<!doctype html> 
 
<html lang="en"> 
 

 
<head> 
 
\t <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.min.js"></script> 
 
\t <script> 
 
\t </script> 
 
</head> 
 

 
<body> 
 
\t <ul class="filter option-set dropdown-menu" role="menu" aria-labelledby="dropdownMenu1" data-filter-group="Agencies"> 
 
\t \t <li> 
 
\t \t \t <a class="btn btn-default btn-lg" href="#filter-client-any" data-filter-value="">All agencies</a> 
 
\t \t </li> 
 

 
\t \t <li><a id="filter-a" class="btn btn-default btn-lg" href="#filter-agency-a" data-filter-value=".A">A</a> 
 
\t \t </li> 
 
\t \t <li><a id="filter-z" class="btn btn-default btn-lg" href="#filter-agency-z" data-filter-value=".Z">Z</a> 
 
\t \t </li> 
 
\t \t <li><a id="filter-c" class="btn btn-default btn-lg" href="#filter-agency-c" data-filter-value=".c">C</a> 
 
\t \t </li> 
 
\t \t <li><a id="filter-h" class="btn btn-default btn-lg" href="#filter-agency-h" data-filter-value=".h">H</a> 
 
\t \t </li> 
 
\t </ul> 
 

 
\t 
 
</body> 
 

 
</html>

+0

См. Обновленный вопрос с полным кодом, вы отвечаете, когда применяется, дает мне: Uncaught TypeError: Не удается прочитать свойство 'index' из null –

+0

Я добавил фрагмент. Кажется, он работает нормально. – Shreejibawa

+0

да, я вижу, что это работает, и, читая ваш код, я уже мог видеть, что это правильно, поэтому у меня должно быть что-то еще, поскольку оно все еще дает мне ошибку на моей стороне tho –

0

Это работает для меня:

$(document).on('click touchend', '.filter a', function(event) { 
    var self = $(this); 
    if (self.text().indexOf("All ") > -1) { 
    self.text(self.text().replace("All ", "")); 
    } 
}); 

Обратите внимание, что я использую .text(), а не .html() ,

Смежные вопросы