Форум

TarasL85 · #1 (**permalink**) 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 · #2 (**permalink**) 19.02.2020, 22:00

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

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

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

рони · #3 (**permalink**) 19.02.2020, 22:04

TarasL85,
this в функции

TarasL85 · #4 (**permalink**) 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 · #5 (**permalink**) 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 · #6 (**permalink**) 21.02.2020, 20:29

Посмотрите, как можно форматировать свой код.

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

[html run]
... минимальный код страницы с вашей проблемой
[/html]

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

TarasL85 · #7 (**permalink**) 21.02.2020, 20:36

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

Nexus · #8 (**permalink**) 21.02.2020, 20:39

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

TarasL85 · #9 (**permalink**) 21.02.2020, 21:04

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

TarasL85 · #10 (**permalink**) 21.02.2020, 21:45

Решение:

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

Форум

Справочник

Discord чат

Курсы javascript