Javascript.RU

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

Объеденить код в один универсальный
Здравствуйте!
Понимаю, что можно как-то сделать это одним кодом, избежав дублирования, но не хватает знаний.
Работает так:
Часть блоков скрыта в CSS (display:none). Если блоков более 5 или 6 (для разных id свое значение), появляется кнопка "еще". При клике по ней добавляется класс active, а сама кнопка пропадает

// кнопка показать еще
if ($('#id-1 .1-item').length > 6) {
$('#id-1 .more').append( 'еще' );
$('#id-1 .more').click(function () {
$('#id-1 .1-item').addClass('active');
$('##id-1 .more').text( "" );
})
};
if ($('#id-2 .2-item').length > 5) {
$('#id-2 .more').append( 'еще' );
$('#id-2 .more').click(function () {
$('#id-2 .2-item').addClass('active');
$('#id-2 .more').text( "" );
})
};

Заранее спасибо за подсказку!
Ответить с цитированием
  #2 (permalink)  
Старый 08.12.2023, 15:10
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,123

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

//
function test(a, n) {
	const c = a.join(' ')
	if ($(c).length <= n) return
	const o = $('#id-1 .more')
	o.append( 'еще' );
	o.click(function () {
		$(с).addClass('active');
		o.text( "" );
	})
}
test(['#id-1', '1-item'], 6)
test(['#id-2', '2-item'], 5)
Ответить с цитированием
  #3 (permalink)  
Старый 08.12.2023, 15:13
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,123

slm, вот если бы ты сделал нормальный и полный тестовый пример - наверняка можно было бы и еще упростить...
Ответить с цитированием
  #4 (permalink)  
Старый 08.12.2023, 18:13
slm slm вне форума
Новичок на форуме
Отправить личное сообщение для slm Посмотреть профиль Найти все сообщения от slm
 
Регистрация: 08.12.2023
Сообщений: 4

Да, действительно лучше целиком представить,а то получилось как то не так.
Вот с вашим кодом, но не заработало:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="charset" content="utf-8">
<title>Тест</title>
<style>
.item1:nth-child(n+7) {display: none;}
.item2:nth-child(n+6) {display: none;}
.item1.active, .item2.active { display: block !important;}
</style>

</head>
<body>
<section id="id-1">
<div class="item1">1</div>
<div class="item1">2</div>
<div class="item1">3</div>
<div class="item1">4</div>
<div class="item1">5</div>
<div class="item1">6</div>
<div class="item1">7</div>
<div class="item1">8</div>
<div class="more"></div>
</section>


<section id="id-2">
<div class="item2">1</div>
<div class="item2">2</div>
<div class="item2">3</div>
<div class="item2">4</div>
<div class="item2">5</div>
<div class="item2">6</div>
<div class="item2">7</div>
<div class="item2">8</div>
<div class="more"></div>
</section>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
//
function test(a, n) {
	const c = a.join(' ')
	if ($(c).length <= n) return
	const o = $('.more')
	o.append( '<div>more</div>' );
	o.click(function () {
		$(с).addClass('active');
		o.text( "" );
	})
}
test(['#id-1', '.item1'], 6)
test(['#id-2', '.item2'], 5)

</script>
</body>
</html>
Ответить с цитированием
  #5 (permalink)  
Старый 08.12.2023, 20:08
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,068

slm,
<!DOCTYPE html>
<html lang="ru">

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="charset" content="utf-8">
    <title>Тест</title>
    <style>
        .item1:nth-child(n+7) {
            display: none;
        }

        .item2:nth-child(n+6) {
            display: none;
        }

        .item1.active,
        .item2.active {
            display: block !important;
        }
    </style>
</head>

<body>
    <section id="id-1">
        <div class="item1">1</div>
        <div class="item1">2</div>
        <div class="item1">3</div>
        <div class="item1">4</div>
        <div class="item1">5</div>
        <div class="item1">6</div>
        <div class="item1">7</div>
        <div class="item1">8</div>
        <div class="more"></div>
    </section>
    <section id="id-2">
        <div class="item2">1</div>
        <div class="item2">2</div>
        <div class="item2">3</div>
        <div class="item2">4</div>
        <div class="item2">5</div>
        <div class="item2">6</div>
        <div class="item2">7</div>
        <div class="item2">8</div>
        <div class="more"></div>
    </section>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script>
        function test(a, n) {
            const c = a.join(' ');
            if ($(c).length <= n) return;
            const o = $('.more', $(a[0])).text('еще');
            o.click(function() {
                $(c).addClass('active');
                o.text("");
            })
        }
        test(['#id-1', '.item1'], 6)
        test(['#id-2', '.item2'], 5)
    </script>
</body>

</html>
Ответить с цитированием
  #6 (permalink)  
Старый 08.12.2023, 20:11
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,068

ksa, #2
Сообщение от ksa
$(с).addClass('active');
с !== c
Ответить с цитированием
  #7 (permalink)  
Старый 08.12.2023, 20:30
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,123

Мои 5коп...

<script src="https://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<style>
section {
	margin: 10px;
	border: 1px solid green;
}
.item1:nth-child(n+7) {
	display: none;
}

.item2:nth-child(n+6) {
	display: none;
}

.item1.active,
.item2.active {
	display: block !important;
}
</style>
<script>
$(_ => {
	$('section').each((_, o) => {
		o = $(o)
		const n = o.data('max')
		const oi = o.find('[class^="item"]')
		if (oi.length <= n) return
		const om = o.find('.more')
		om.text('еще')
		o.on('click', _ => {
			oi.addClass('active')
			om.text('')
		})
	})
})
</script>

<section id="id-1" data-max='6'>
	<div class="item1">1</div>
	<div class="item1">2</div>
	<div class="item1">3</div>
	<div class="item1">4</div>
	<div class="item1">5</div>
	<div class="item1">6</div>
	<div class="item1">7</div>
	<div class="item1">8</div>
	<div class="more"></div>
</section>
<section id="id-2" data-max='5'>
	<div class="item2">1</div>
	<div class="item2">2</div>
	<div class="item2">3</div>
	<div class="item2">4</div>
	<div class="item2">5</div>
	<div class="item2">6</div>
	<div class="item2">7</div>
	<div class="item2">8</div>
	<div class="more"></div>
</section>
Ответить с цитированием
  #8 (permalink)  
Старый 08.12.2023, 20:51
slm slm вне форума
Новичок на форуме
Отправить личное сообщение для slm Посмотреть профиль Найти все сообщения от slm
 
Регистрация: 08.12.2023
Сообщений: 4

рони и ksa спасибо за помощь !
Первый вариант с корректировкой рони мне более понятен, а вот до последней редакции я совсем не вырос)) Да и в моем случае будет проще указать максимальные значения в коде скрипта, чем в шаблонах data-max=''
Еще раз спасибо!!!
Ответить с цитированием
  #9 (permalink)  
Старый 13.12.2023, 13:09
slm slm вне форума
Новичок на форуме
Отправить личное сообщение для slm Посмотреть профиль Найти все сообщения от slm
 
Регистрация: 08.12.2023
Сообщений: 4

Решил, что нужно избавиться от <div class="more"></div> в html коде и подставлять его когда это необходимо. Обернул дивом с классом "price" и что-то пошло не так.

<!DOCTYPE html>
<html lang="ru">

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="charset" content="utf-8">
    <title>Тест</title>
    <style>
        .item1:nth-child(n+7) {
            display: none;
        }

        .item2:nth-child(n+6) {
            display: none;
        }

        .item1.active,
        .item2.active {
            display: block !important;
        }
    </style>
</head>

<body>
    <section id="id-1">
	<div class="price">
        <div class="item1">1</div>
        <div class="item1">2</div>
        <div class="item1">3</div>
        <div class="item1">4</div>
        <div class="item1">5</div>
        <div class="item1">6</div>
        <div class="item1">7</div>
        <div class="item1">8</div>
   </div>    
    </section>
    <section id="id-2">
	<div class="price">
        <div class="item2">1</div>
        <div class="item2">2</div>
        <div class="item2">3</div>
        <div class="item2">4</div>
        <div class="item2">5</div>
        <div class="item2">6</div>
        <div class="item2">7</div>
        <div class="item2">8</div>
      </div> 
    </section>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script>
        function test(a, n) {
		$('.price').after( '<div class="more">еще1</div>' );
            const c = a.join(' ');
            if ($(c).length <= n) return;
            const o = $('.more');
            o.click(function() {
                $(c).addClass('active');
                o.text("");
				$(o).addClass('active');
            })
        }
        test(['#id-1', '.item1'], 6)
        test(['#id-1', '.item2'], 5)
    </script>
</body>
</html>
Ответить с цитированием
  #10 (permalink)  
Старый 13.12.2023, 15:59
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,704

Вы два раза вызываете test и два раза вставляете див с .more в дивы .price
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
PopUp как выполнить код один раз для сессии kznsky Events/DOM/Window 5 03.03.2015 13:48
Как подгрузить код JS динамически? zhurchik Общие вопросы Javascript 22 02.02.2015 14:16
один setInterval внутри другого setInterval-а dadli Общие вопросы Javascript 5 20.03.2012 18:16
код нe работает в фаирфохе dadli Javascript под браузер 2 28.01.2012 21:18
Типографика и HTML код Manjuriano (X)HTML/CSS 3 23.11.2011 12:22