Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   как найти элемент с таким же атрибутом и добавить ему класс? (https://javascript.ru/forum/misc/58478-kak-najjti-ehlement-s-takim-zhe-atributom-i-dobavit-emu-klass.html)

nmlgko 24.09.2015 10:40

как найти элемент с таким же атрибутом и добавить ему класс?
 
Есть вот такой вот кусочек в одном месте

<dl class="tab_offers">
		<dt class="offers_title" attr="1"></dt>
  		<dt class="offers_title" attr="2"></dt>
  		<dt class="offers_title" attr="3"></dt>
  		<dt class="offers_title" attr="4"></dt>
	</dl>


И есть такой же в другом месте, но теперь уже с айдишником
<dl class="tab_offers" id="popup_offers">
		<dt class="offers_title" attr="1"></dt>
  		<dt class="offers_title" attr="2"></dt>
  		<dt class="offers_title" attr="3"></dt>
  		<dt class="offers_title" attr="4"></dt>
	</dl>


Кликнув по offers_title из первого места, требуется найти во втором месте offers_title с таким же атрибутом и добавить ему класс active

$('.offers_title:not(#popup_offers .offers_title)').on('click', function(){
      var atribut = $(this).attr('attr');
      var atributPopup = $('#popup_offers .offers_title').filter("[attr='atribut']");
      $(atributPopup).addClass('active');
    	});

Что-то я не так пишу, помогите, пожалуйста!

ksa 24.09.2015 11:03

Когда начнут делать полные тестовые примеры... :(

Цитата:

Сообщение от nmlgko
Кликнув по offers_title из первого места, требуется найти во втором месте offers_title с таким же атрибутом и добавить ему класс active

Как вариант...

<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<script src='http://code.jquery.com/jquery-latest.js'></script>
<!--
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
-->
<style type='text/css'>
.tab_offers {
	border: 1px solid;
}
.active {
	color: red;
}
</style>
<script type='text/javascript'>
$(function(){
	$('.tab_offers:first-child > .offers_title').click(function(){
		var attr=$(this).attr('attr');
		$('#popup_offers > dt[attr="'+attr+'"]').addClass('active');
	});
});
</script>
</head>
<body>
<dl class="tab_offers">
	<dt class="offers_title" attr="1">1</dt>
	<dt class="offers_title" attr="2">2</dt>
	<dt class="offers_title" attr="3">3</dt>
	<dt class="offers_title" attr="4">4</dt>
</dl>
<dl class="tab_offers" id="popup_offers">
	<dt class="offers_title" attr="1">1</dt>
	<dt class="offers_title" attr="2">2</dt>
	<dt class="offers_title" attr="3">3</dt>
	<dt class="offers_title" attr="4">4</dt>
</dl>
</body>
</html>

nmlgko 24.09.2015 11:44

спаисбо!
но что-то не так...

вот живой пример http://plnkr.co/edit/wBSYhof2Vz66eD1qqJ9r?p=preview

nmlgko 24.09.2015 11:49

первая часть - идет просто на странице. Нижняя часть - открывается в попапе. Нужно, кликнув по одному из пунктов верхней части, чтоб в нижней части добавился класс active к такой же закладке. Если добавится класс - появится маленький треугольничек )) поклацайте по нижней части, там типа табы...

рони 24.09.2015 12:44

nmlgko,
jQuery(function() {
    var a = jQuery(".offers_title.popupsts"),
        b = jQuery(".offers_title").not(".popupsts");
    a.each(function(a, c) {
        jQuery(this).click(function() {
            b.eq(a).click()
        })
    })
});

http://embed.plnkr.co/6WGAtUi1ASesERe8TtEG/preview

ksa 24.09.2015 12:46

Цитата:

Сообщение от nmlgko
вот живой пример

А нужно тестовый, но максимально приближенный к твоей проблеме. ;)

nmlgko 24.09.2015 13:04

спасибо большое!

nmlgko 24.09.2015 13:21

теперь если б еще кто-то рассказал по-русски, что откуда и куда ... ))))

рони 24.09.2015 15:19

nmlgko,
что не ясно? клик вверху дублируется кликом внизу, чем вызывает появление класса 'active'


Часовой пояс GMT +3, время: 22:56.