Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Смена класса див (https://javascript.ru/forum/events/79519-smena-klassa-div.html)

TarasL85 18.02.2020 22:04
Смена класса див
 
Здравствуйте. Помогите пожалуйста дописать код. Есть такая строчка: <a href='#' class="spo1">йцукен<div class="spo1a" id="sp1"><span class="icon"></span></div></a>Необходимо, что бы у див(id="sp1") был класс .spo1a - когда внутри символ icon стрелка вниз, а когда внутри символ крест - у див(id="sp1") был класс .spo1b Буду очень признателен, найти ничего не смог. Вот сам код:

var icon = $('.spo1');
icon.find('span').text('⬇');


$('.spo1').click(function()
{
var $other_spoilers = $('a.spo1').not(this);
$other_spoilers.siblings().hide('fast');

$other_spoilers.find('span').text('⬇');

$(this).siblings().toggle('fast', function() {

var $icon = $(this).siblings('a.spo1').find('span')
if ($icon.text() == '⬇') {
$icon.text('×')

} else {
$icon.text('⬇')

}
})
return false;
});

laimas 19.02.2020 22:00
Форматировать код нужно. А вообще принцип таков:

$other_spoilers.find('span:contains("⬇")').addClass('spo1')


и для иного содержимого также

рони 19.02.2020 22:04
TarasL85,
http://javascript.ru/forum/events/78475-v-funkcii.html

TarasL85 20.02.2020 20:15
Спасибо за отклики. Вот что получается, класс spot1b при смене символа добавляется, но первоначальный класс див (spo1a) при этом то же остается и при повторной смене символов обратно, оба класса одновременно так и остаются. Люди плиз помогите, вот что получилось:

<script type="text/javascript">
var icon = $('.spo1');
icon.find('span').text('⬇');


$('.spo1').click(function()
{
var $other_spoilers = $('a.spo1').not(this);
$other_spoilers.siblings().hide('fast');

$other_spoilers.find('span').text('⬇');

$(this).siblings().toggle('fast', function() {

var $icon = $(this).siblings('a.spo1').find('span')
if ($icon.text() == '⬇') {
$icon.text('×').addClass('spo1b')


} else {
$icon.text('⬇').addClass('spo1a')

}
})
return false;
});
</script>

TarasL85 21.02.2020 20:15
Друзья еще раз спасибо за помощь, все получилось. Вот рабочий вариант:

<script type="text/javascript">
var icon = $('.spo1');
icon.find('span').text('+').addClass('spo1a');


$('.spo1').click(function()
{
var $other_spoilers = $('a.spo1').not(this);
$other_spoilers.siblings().hide('fast');

$other_spoilers.find('span').text('+').removeClass ('spo1b').addClass('spo1a');

$(this).siblings().toggle('fast', function() {

var $icon = $(this).siblings('a.spo1').find('span')
if ($icon.text() == '+') {
$icon.text('×').removeClass('spo1a').addClass('sp o1b')


} else {
$icon.text('+').removeClass('spo1b').addClass('spo 1a')

}
})
return false;
});
</script>

Nexus 21.02.2020 20:29
Посмотрите, как можно форматировать свой код.

Код можно заключить в специальные теги: js/css/html и т.п., например:
[html run]
... минимальный код страницы с вашей проблемой
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

TarasL85 21.02.2020 20:36
Могли бы подсказать, как сделать что бы один спойлер был всегда открыт при загрузке/перезагрузке страницы , не через display:none, а именно через нажатие по диву открывающему спойлер?

Nexus 21.02.2020 20:39
TarasL85, лично я почти ничего не понял.
Опишите свою задачу подробнее.

TarasL85 21.02.2020 21:04
) Есть 4 спойлера, каждый из который открывается и закрывается по нажатию на ссылку заголовок. Изначально при загрузке страницы они все скрыты. Как сделать что бы один из них был открыт, но таким образом как будто нажали на эту ссылку, просто по другому, значок на ссылке не меняется(без нажатия по ней)

TarasL85 21.02.2020 21:45
Решение:

<body onload="document.getElementById('spoiler1').click( )">


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