Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 18.02.2020, 21:04
Новичок на форуме
Отправить личное сообщение для TarasL85 Посмотреть профиль Найти все сообщения от TarasL85
 
Регистрация: 18.02.2020
Сообщений: 9

Смена класса див
Здравствуйте. Помогите пожалуйста дописать код. Есть такая строчка: <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;
});

Последний раз редактировалось TarasL85, 18.02.2020 в 21:13.
Ответить с цитированием
  #2 (permalink)  
Старый 19.02.2020, 21:00
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 11,726

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

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


и для иного содержимого также
Ответить с цитированием
  #3 (permalink)  
Старый 19.02.2020, 21:04
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 28,018

TarasL85,
this в функции
Ответить с цитированием
  #4 (permalink)  
Старый 20.02.2020, 19:15
Новичок на форуме
Отправить личное сообщение для TarasL85 Посмотреть профиль Найти все сообщения от TarasL85
 
Регистрация: 18.02.2020
Сообщений: 9

Спасибо за отклики. Вот что получается, класс 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>
Ответить с цитированием
  #5 (permalink)  
Старый 21.02.2020, 19:15
Новичок на форуме
Отправить личное сообщение для TarasL85 Посмотреть профиль Найти все сообщения от TarasL85
 
Регистрация: 18.02.2020
Сообщений: 9

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

<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>
Ответить с цитированием
  #6 (permalink)  
Старый 21.02.2020, 19:29
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,050

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

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

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
Ответить с цитированием
  #7 (permalink)  
Старый 21.02.2020, 19:36
Новичок на форуме
Отправить личное сообщение для TarasL85 Посмотреть профиль Найти все сообщения от TarasL85
 
Регистрация: 18.02.2020
Сообщений: 9

Могли бы подсказать, как сделать что бы один спойлер был всегда открыт при загрузке/перезагрузке страницы , не через display:none, а именно через нажатие по диву открывающему спойлер?
Ответить с цитированием
  #8 (permalink)  
Старый 21.02.2020, 19:39
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,050

TarasL85, лично я почти ничего не понял.
Опишите свою задачу подробнее.
Ответить с цитированием
  #9 (permalink)  
Старый 21.02.2020, 20:04
Новичок на форуме
Отправить личное сообщение для TarasL85 Посмотреть профиль Найти все сообщения от TarasL85
 
Регистрация: 18.02.2020
Сообщений: 9

) Есть 4 спойлера, каждый из который открывается и закрывается по нажатию на ссылку заголовок. Изначально при загрузке страницы они все скрыты. Как сделать что бы один из них был открыт, но таким образом как будто нажали на эту ссылку, просто по другому, значок на ссылке не меняется(без нажатия по ней)
Ответить с цитированием
  #10 (permalink)  
Старый 21.02.2020, 20:45
Новичок на форуме
Отправить личное сообщение для TarasL85 Посмотреть профиль Найти все сообщения от TarasL85
 
Регистрация: 18.02.2020
Сообщений: 9

Решение:

<body onload="document.getElementById('spoiler1').click( )">
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Автоматическая смена активного класса по таймеру MiHALbI4 Общие вопросы Javascript 4 08.04.2019 18:21
Смена класса при скроллинге Dayros Общие вопросы Javascript 17 24.01.2017 19:32
Смена класса с запоминание joker95 Элементы интерфейса 1 11.04.2016 12:00
Смена класса или удаление "/" Step48_rus jQuery 1 28.07.2015 14:56
Использование классов в JavaScript devote Ваши сайты и скрипты 70 01.02.2013 15:17