Форум

slm · #1 (**permalink**) 08.12.2023, 11:19

Здравствуйте!
Понимаю, что можно как-то сделать это одним кодом, избежав дублирования, но не хватает знаний.
Работает так:
Часть блоков скрыта в 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( "" );
})
};

Заранее спасибо за подсказку!

ksa · #2 (**permalink**) 08.12.2023, 15:10

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

//
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)

ksa · #3 (**permalink**) 08.12.2023, 15:13

slm, вот если бы ты сделал нормальный и полный тестовый пример - наверняка можно было бы и еще упростить...

slm · #4 (**permalink**) 08.12.2023, 18:13

Да, действительно лучше целиком представить,а то получилось как то не так.
Вот с вашим кодом, но не заработало:

<!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

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

ksa, #2

Сообщение от ksa

$(с).addClass('active');

с !== c

ksa · #7 (**permalink**) 08.12.2023, 20:30

Мои 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>

slm · #8 (**permalink**) 08.12.2023, 20:51

рони и ksa спасибо за помощь !
Первый вариант с корректировкой рони мне более понятен, а вот до последней редакции я совсем не вырос)) Да и в моем случае будет проще указать максимальные значения в коде скрипта, чем в шаблонах data-max=''
Еще раз спасибо!!!

slm · #9 (**permalink**) 13.12.2023, 13:09

Решил, что нужно избавиться от <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>

voraa · #10 (**permalink**) 13.12.2023, 15:59

Вы два раза вызываете test и два раза вставляете див с .more в дивы .price

Форум

Справочник

Discord чат

Курсы javascript