[[!pdoPage?
&tpl=`blog-tpl`
&includeTVs=`news-image`
&sortdir=`ASC`
&limit=`8`
&tplPageWrapper=`@INLINE <nav aria-label="pagination"><ul class="pagination">[[+first]][[+prev]][[+pages]][[+next]][[+last]]</ul></nav>` &tplPageFirst=`@INLINE <li class="page-item"><a class="page-link" href="[[+href]]">Первая</a></li>`
&tplPageLast=`@INLINE <li class="page-item"><a class="page-link" href="[[+href]]">Последняя</a></li>`
&tplPage=`@INLINE <li class="page-item"><a class="page-link" href="[[+href]]">[[+pageNo]]</a></li>`
&tplPageActive=`@INLINE <li class="page-item active"><a class="page-link" href="[[+href]]">[[+pageNo]]</a></li>`
&tplPagePrev=`@INLINE <li class="page-item"><a class="page-link" href="[[+href]]"><span aria-hidden="true">«</span><span class="sr-only">Previous</span></a></li>`
&tplPageNext=`@INLINE <li class="page-item"><a class="page-link" href="[[+href]]"><span aria-hidden="true">»</span><span class="sr-only">Next</span></a></li>`
&tplPagePrevEmpty=`@INLINE <li class="page-item disabled"><a class="page-link" href="[[+href]]"><span aria-hidden="true">«</span><span class="sr-only">Previous</span></a></li>`
&tplPageNextEmpty=`@INLINE <li class="page-item disabled"><a class="page-link" href="[[+href]]"><span aria-hidden="true">»</span><span class="sr-only">Next</span></a></li>`
&tplPageFirstEmpty=``
&tplPageLastEmpty=``
]]
[[!+page.nav]]
[[++varname]] ?
{$_modx->config.varname} ?
$('.carousel').owlCarousel({
...,
navContainer: ".navigation"
})
// небольшая функция хелпер, чтоб писать меньше кода:
const appendNewDiv = parent => parent.appendChild(document.createElement('div'));
// создадим основные эллементы
const wrap = appendNewDiv(albumTrack);
const title = appendNewDiv(wrap);
const itemAlbumWrap = appendNewDiv(wrap);
const itemAlbum = appendNewDiv(itemAlbumWrap);
wrap.classList.add('album__item');
title.classList.add('album_title');
itemAlbumWrap.classList.add('album__item__wrap');
itemAlbum.classList.add('album__photo');
// сюда будем складывать элементы, которые должны удалятся при смене number
let elements = [];
// функция, через которую меняем отображаемые данные по number
const renderByNumber = number => {
const {albumId, albums} = arr2[number];
elements.forEach(e => wrap.removeChild(e));
title.textContent = `Альбом ${albumId}`;
elements = albums.map(album => {
const e = appendNewDiv(wrap);
e.textContent = album.title;
return e;
});
};
// при изменении number теперь просто вызываем
renderByNumber(number);
const types = [ 'text', 'password', 'number' ];
const [ type, setType ] = useState('text');
<input type={type} />
const onTypeChange = e => setType(e.target.value);
{types.map(n => (
<input
type="button"
value={n}
className={n === type ? 'active' : ''}
onClick={onTypeChange}
/>
))}
{types.map(n => (
<label>
<input
type="radio"
value={n}
checked={n === type}
onChange={onTypeChange}
/>
{n}
</label>
))}
<select value={type} onChange={onTypeChange}>
{types.map(n => <option>{n}</option>)}
</select>
<button onClick={() => setType(types[(types.indexOf(type) + 1) % types.length])}>
next type
</button>