#javascript #html #jquery #css
#javascript #HTML #jquery #css
Вопрос:
Я новичок здесь, так как я только что изучил javascript.
Я пытаюсь создать список карт с описанием, и я хочу добавить щелчок, чтобы расширить функциональность для каждой карты на веб-странице.
Я написал код для увеличения высоты и переключения некоторых классов в соответствии с моими потребностями, но проблема, с которой я сталкиваюсь, заключается в том, что я создал переменную с именем «full», а ее начальное значение равно false, и когда я нажимаю кнопку, чтобы развернуть карточку, ее значение изменяется на true, а когда я нажимаю кнопку, чтобы свернуть, ее значение присваивается false. Это нормально работает для одной карты, но мне нужно как минимум 10 карт, чтобы выполнять ту же функциональность. Каждому div присваивается свой идентификатор.
Основная проблема заключается в том, что, поскольку существует общая функция различных кнопок расширения для изменения значения моей «полной» переменной, другая кнопка затем пропускает ее.
var full = false;
function expand(id) {
if (full === false) {
document.getElementById(id "d").style.height = "fit-content";
document.getElementById(id).innerHTML = "Collapse";
full = true;
} else {
document.getElementById(id "d").style.height = "150px";
document.getElementById(id).innerHTML = "Expand";
full = false;
}
} :root {
--star-size: 25px;
--star-color: #fff;
--star-background: #fc0;
}
.Stars {
--percent: calc(var(--rating) / 5 * 100%);
display: inline-block;
font-size: var(--star-size);
font-family: Times;
line-height: 1;
padding-left: 7px;
}
.Stars::before {
content: '★★★★★';
letter-spacing: 3px;
background: linear-gradient(90deg, var(--star-background) var(--percent), var(--star-color) var(--percent));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.main{
display: grid;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
width: 70%;
margin-top: 25px;
border-radius: 9px;
}
.main:hover{
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
body {
display: flex;
flex-direction: column;
justify-content: center;
background-color:#F2F2F3;
align-items: center;
margin: 20px;
}
.card{
display: flex;
/* align-items: center; */
background-color: white;
justify-content: space-between;
padding: 25px;
border-bottom-left-radius: 9px;
border-bottom-right-radius: 9px;
border-left: 2px black solid;
}
.desc{
width: 70%;
}
.card .thumb{
width: 150px;
padding: 10px 0px;
}
.card .button{
padding-left: 30px;
}
.rating{
display: flex;
flex-direction: row;
align-items: center;
/* justify-content: space-between; */
height: 40px;
}
.rating p{
padding-right: 17px;
}
.top-bar{
display: flex;
justify-content: space-between;
border-left: 2px black solid;
background-color: #ffffff;
background-image: linear-gradient(30deg, #F9FAFC 0%, #f0f0f0 74%);
border-top-left-radius: 9px;
border-top-right-radius: 9px;
align-items: center;
padding-left: 5px;
}
button{
background-color: black;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 12px;
border-radius: 3px;;
width: -webkit-fill-available;
}
.left{
display: flex;
margin-right: 30px;
flex-direction: column;
align-items: center;
}
.shrink{
width: 70%;
height: 150px;
overflow: hidden;
}
.shrink div ::after{
content: "";
background-color: red;
}
.read-more{
display: block;
text-align: center;
margin-top: -25px;
border-radius: 9px;
cursor: pointer;
} <div class="main">
<div class="top-bar">
<div><h2>1. First App</h2></div>
<div class="rating">
<p>Rating:</p>
<div class="Stars" style="--rating: 2.5;" aria-label="Rating of this product is 2.5 out of 5."></div>
<p>2.5/5 Stars</p>
</div>
</div>
<div class="card" id="1c">
<div class="left"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c2/Spark_App_Logo.svg/1024px-Spark_App_Logo.svg.png" class="thumb">
<button>Download App</button></div>
<div class="shrink" id="1d">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt atque recusandae consectetur ipsum aut eos molestiae odio doloremque suscipit, minima illum quis! Possimus quo dolorum accusantium mollitia consequuntur dolorem culpa sapiente sunt libero error a delectus adipisci non quis deleniti, neque modi assumenda quibusdam laudantium doloremque expedita aut nostrum nulla! Temporibus eius voluptate atque perspiciatis nihil consequatur praesentium ipsa quasi? Quis, labore? Ad quam hic nobis architecto, nisi debitis! Adipisci voluptates nemo est nam corporis nostrum aut ut expedita, iusto error commodi fugit sed earum aspernatur quidem blanditiis quos eos repudiandae? Quos, totam aliquid, sint voluptatibus veniam nostrum voluptates consequuntur voluptatum recusandae temporibus cumque quibusdam nesciunt expedita. Dolor et esse modi quas aliquam eos natus laudantium harum atque, repellat eum quo animi fuga aliquid necessitatibus blanditiis quasi at autem culpa unde, placeat commodi! Eos iusto consequuntur maxime delectus voluptates accusamus, debitis, eveniet doloremque eligendi officia, obcaecati minima perferendis illum laboriosam vitae! Porro, nulla blanditiis assumenda illo tenetur, excepturi neque voluptate culpa ducimus esse amet dolor error corporis tempore eum ut molestias similique consequuntur, iste aut? Vero doloremque dolores iure voluptatem, reprehenderit sequi, sapiente atque quia iste ab quis, ipsa voluptates quaerat officia accusantium quae voluptas nisi esse. Sequi, libero? Nulla explicabo eligendi aliquam totam ea repudiandae adipisci illo, officiis obcaecati dolorem dolores nobis laboriosam tempora odio incidunt at illum facilis dolor reprehenderit non magni suscipit? Nulla ut quibusdam modi, veniam illum a mollitia tenetur. Recusandae adipisci consectetur repudiandae ipsam officiis quam libero amet reprehenderit distinctio animi beatae laudantium non nobis accusamus asperiores, ut modi tempora facere voluptas voluptatum iusto facilis corrupti. Deleniti saepe vero autem non delectus praesentium ex dolor pariatur doloremque, aliquid incidunt vel voluptatem consequatur in. Similique vel excepturi nihil et commodi fugiat debitis maiores laboriosam, vitae voluptate, culpa rem dignissimos tenetur? Beatae eos cum facilis sapiente dolorem.
</div>
</div>
<div id="1" class="read-more" onclick="expand(this.id)">Expand</div>
</div>
<div class="main">
<div class="top-bar">
<div><h2>2. Second App</h2></div>
<div class="rating">
<p>Rating:</p>
<div class="Stars" style="--rating: 3.5;" aria-label="Rating of this product is 2.3 out of 5."></div>
<p>3.5/5 Stars</p>
</div>
</div>
<div class="card" id="2c">
<div class="left"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c2/Spark_App_Logo.svg/1024px-Spark_App_Logo.svg.png" class="thumb">
<button>Download App</button></div>
<div class="shrink" id="2d">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam unde quo voluptatibus! Repellat, tempora? Eligendi impedit labore odio illo numquam! Quas hic quasi aut cumque unde culpa sint eveniet. Cupiditate aperiam sint similique quia facere exercitationem hic labore magni expedita iure assumenda nostrum laborum ratione soluta earum voluptas optio vel in illum, inventore saepe corrupti ipsam repudiandae consectetur. Eaque magnam non facere corporis iste, excepturi veniam accusantium tenetur? Harum itaque qui quas temporibus aut cupiditate veniam aperiam cum pariatur? Vitae harum temporibus doloremque voluptate impedit blanditiis, eius at. Molestiae, ipsa alias? Delectus ipsam quod ab quis esse saepe cupiditate ad doloribus culpa debitis illo repellendus, explicabo quidem quas eligendi, reprehenderit omnis dignissimos nulla reiciendis! Nemo consequuntur facilis debitis quas molestias at necessitatibus soluta laudantium eum. Temporibus inventore adipisci unde commodi non quisquam dolores officiis rem, vel ut! Eius quidem molestias ipsa reiciendis distinctio quod amet cumque quis nisi atque nulla doloremque iusto nesciunt ipsum dolorum, tempora quam, incidunt consequatur. Minima eius perferendis at? Minus, aspernatur ducimus? Neque ex modi nesciunt illo? Distinctio nam molestiae aspernatur facere eum libero modi quibusdam labore adipisci amet fugiat consequatur, cum sequi? Quasi voluptatem similique in alias ducimus sed, totam aperiam fuga facilis officiis temporibus culpa ab? Cumque facere vitae recusandae voluptatibus cum. Numquam iste soluta molestiae quisquam blanditiis atque nostrum ea sint delectus a quasi excepturi nemo necessitatibus nobis itaque, voluptate, non eveniet pariatur sapiente, minima reprehenderit quam ipsa rerum officiis. Facere quibusdam eos ut? Quae obcaecati fuga, quia, illum iure necessitatibus eos quasi ullam a placeat modi, tempora aperiam unde illo sed repellat nobis! Eius aut, blanditiis dicta earum minima rem officiis autem cupiditate et dolor commodi aliquam, vitae laboriosam. Iste nam iusto consequatur quam, sunt, ad perspiciatis dolore ex expedita alias incidunt quo esse corrupti, similique voluptatem. Qui saepe vitae esse commodi.
</div>
</div>
<div id="2" class="read-more" onclick="expand(this.id)">Expand</div>
</div> Я думаю, что такого рода функции могут быть созданы в jQuery, но поскольку я новичок, я хочу сделать это в JS.
Комментарии:
1. Вам нужно превратить «‘full»‘ в объект таким образом, чтобы у него были свои собственные переменные, названные в честь различных идентификаторов DOM. РЕДАКТИРОВАТЬ: В качестве альтернативы вы могли бы полностью отказаться от переменной «‘full»‘ и отключить «‘if»‘ от атрибута DOM, то есть стиля. высота
Ответ №1:
Поскольку вы передаете значения Collapse и Expand innerHTML, я делаю здесь свою собственную работу. Когда текущее innerHTML значение, соответствующее этому идентификатору, равно Expand , при нажатии на то же самое действие должно быть свернуто и viseversa.
Редактировать: Если innerHTML это просто для демонстрации, вы могли бы добавить пользовательский атрибут к этому элементу html, скажем nodeStatus , и соответствующим образом переключать элементы. Пожалуйста, проверьте решение ниже
function expand(id) {
var isCollapsed = document.getElementById(id).nodeStatus === "Collapse";
if (!isCollapsed) {
// If not collapsed, then collapse it
document.getElementById(id "d").style.height = "fit-content";
document.getElementById(id).nodeStatus = "Collapse";
document.getElementById(id).innerHTML = "Collapse";
} else {
// If already collapsed, then expand it
document.getElementById(id "d").style.height = "150px";
document.getElementById(id).nodeStatus = "Expand";
document.getElementById(id).innerHTML = "Expand";
}
} :root {
--star-size: 25px;
--star-color: #fff;
--star-background: #fc0;
}
.Stars {
--percent: calc(var(--rating) / 5 * 100%);
display: inline-block;
font-size: var(--star-size);
font-family: Times;
line-height: 1;
padding-left: 7px;
}
.Stars::before {
content: '★★★★★';
letter-spacing: 3px;
background: linear-gradient(90deg, var(--star-background) var(--percent), var(--star-color) var(--percent));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.main{
display: grid;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
width: 70%;
margin-top: 25px;
border-radius: 9px;
}
.main:hover{
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
body {
display: flex;
flex-direction: column;
justify-content: center;
background-color:#F2F2F3;
align-items: center;
margin: 20px;
}
.card{
display: flex;
/* align-items: center; */
background-color: white;
justify-content: space-between;
padding: 25px;
border-bottom-left-radius: 9px;
border-bottom-right-radius: 9px;
border-left: 2px black solid;
}
.desc{
width: 70%;
}
.card .thumb{
width: 150px;
padding: 10px 0px;
}
.card .button{
padding-left: 30px;
}
.rating{
display: flex;
flex-direction: row;
align-items: center;
/* justify-content: space-between; */
height: 40px;
}
.rating p{
padding-right: 17px;
}
.top-bar{
display: flex;
justify-content: space-between;
border-left: 2px black solid;
background-color: #ffffff;
background-image: linear-gradient(30deg, #F9FAFC 0%, #f0f0f0 74%);
border-top-left-radius: 9px;
border-top-right-radius: 9px;
align-items: center;
padding-left: 5px;
}
button{
background-color: black;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 12px;
border-radius: 3px;;
width: -webkit-fill-available;
}
.left{
display: flex;
margin-right: 30px;
flex-direction: column;
align-items: center;
}
.shrink{
width: 70%;
height: 150px;
overflow: hidden;
}
.shrink div ::after{
content: "";
background-color: red;
}
.read-more{
display: block;
text-align: center;
margin-top: -25px;
border-radius: 9px;
cursor: pointer;
} <div class="main">
<div class="top-bar">
<div><h2>1. First App</h2></div>
<div class="rating">
<p>Rating:</p>
<div class="Stars" style="--rating: 2.5;" aria-label="Rating of this product is 2.5 out of 5."></div>
<p>2.5/5 Stars</p>
</div>
</div>
<div class="card" id="1c">
<div class="left"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c2/Spark_App_Logo.svg/1024px-Spark_App_Logo.svg.png" class="thumb">
<button>Download App</button></div>
<div class="shrink" id="1d">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt atque recusandae consectetur ipsum aut eos molestiae odio doloremque suscipit, minima illum quis! Possimus quo dolorum accusantium mollitia consequuntur dolorem culpa sapiente sunt libero error a delectus adipisci non quis deleniti, neque modi assumenda quibusdam laudantium doloremque expedita aut nostrum nulla! Temporibus eius voluptate atque perspiciatis nihil consequatur praesentium ipsa quasi? Quis, labore? Ad quam hic nobis architecto, nisi debitis! Adipisci voluptates nemo est nam corporis nostrum aut ut expedita, iusto error commodi fugit sed earum aspernatur quidem blanditiis quos eos repudiandae? Quos, totam aliquid, sint voluptatibus veniam nostrum voluptates consequuntur voluptatum recusandae temporibus cumque quibusdam nesciunt expedita. Dolor et esse modi quas aliquam eos natus laudantium harum atque, repellat eum quo animi fuga aliquid necessitatibus blanditiis quasi at autem culpa unde, placeat commodi! Eos iusto consequuntur maxime delectus voluptates accusamus, debitis, eveniet doloremque eligendi officia, obcaecati minima perferendis illum laboriosam vitae! Porro, nulla blanditiis assumenda illo tenetur, excepturi neque voluptate culpa ducimus esse amet dolor error corporis tempore eum ut molestias similique consequuntur, iste aut? Vero doloremque dolores iure voluptatem, reprehenderit sequi, sapiente atque quia iste ab quis, ipsa voluptates quaerat officia accusantium quae voluptas nisi esse. Sequi, libero? Nulla explicabo eligendi aliquam totam ea repudiandae adipisci illo, officiis obcaecati dolorem dolores nobis laboriosam tempora odio incidunt at illum facilis dolor reprehenderit non magni suscipit? Nulla ut quibusdam modi, veniam illum a mollitia tenetur. Recusandae adipisci consectetur repudiandae ipsam officiis quam libero amet reprehenderit distinctio animi beatae laudantium non nobis accusamus asperiores, ut modi tempora facere voluptas voluptatum iusto facilis corrupti. Deleniti saepe vero autem non delectus praesentium ex dolor pariatur doloremque, aliquid incidunt vel voluptatem consequatur in. Similique vel excepturi nihil et commodi fugiat debitis maiores laboriosam, vitae voluptate, culpa rem dignissimos tenetur? Beatae eos cum facilis sapiente dolorem.
</div>
</div>
<div id="1" class="read-more" onclick="expand(this.id)">Expand</div>
</div>
<div class="main">
<div class="top-bar">
<div><h2>2. Second App</h2></div>
<div class="rating">
<p>Rating:</p>
<div class="Stars" style="--rating: 3.5;" aria-label="Rating of this product is 2.3 out of 5."></div>
<p>3.5/5 Stars</p>
</div>
</div>
<div class="card" id="2c">
<div class="left"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c2/Spark_App_Logo.svg/1024px-Spark_App_Logo.svg.png" class="thumb">
<button>Download App</button></div>
<div class="shrink" id="2d">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam unde quo voluptatibus! Repellat, tempora? Eligendi impedit labore odio illo numquam! Quas hic quasi aut cumque unde culpa sint eveniet. Cupiditate aperiam sint similique quia facere exercitationem hic labore magni expedita iure assumenda nostrum laborum ratione soluta earum voluptas optio vel in illum, inventore saepe corrupti ipsam repudiandae consectetur. Eaque magnam non facere corporis iste, excepturi veniam accusantium tenetur? Harum itaque qui quas temporibus aut cupiditate veniam aperiam cum pariatur? Vitae harum temporibus doloremque voluptate impedit blanditiis, eius at. Molestiae, ipsa alias? Delectus ipsam quod ab quis esse saepe cupiditate ad doloribus culpa debitis illo repellendus, explicabo quidem quas eligendi, reprehenderit omnis dignissimos nulla reiciendis! Nemo consequuntur facilis debitis quas molestias at necessitatibus soluta laudantium eum. Temporibus inventore adipisci unde commodi non quisquam dolores officiis rem, vel ut! Eius quidem molestias ipsa reiciendis distinctio quod amet cumque quis nisi atque nulla doloremque iusto nesciunt ipsum dolorum, tempora quam, incidunt consequatur. Minima eius perferendis at? Minus, aspernatur ducimus? Neque ex modi nesciunt illo? Distinctio nam molestiae aspernatur facere eum libero modi quibusdam labore adipisci amet fugiat consequatur, cum sequi? Quasi voluptatem similique in alias ducimus sed, totam aperiam fuga facilis officiis temporibus culpa ab? Cumque facere vitae recusandae voluptatibus cum. Numquam iste soluta molestiae quisquam blanditiis atque nostrum ea sint delectus a quasi excepturi nemo necessitatibus nobis itaque, voluptate, non eveniet pariatur sapiente, minima reprehenderit quam ipsa rerum officiis. Facere quibusdam eos ut? Quae obcaecati fuga, quia, illum iure necessitatibus eos quasi ullam a placeat modi, tempora aperiam unde illo sed repellat nobis! Eius aut, blanditiis dicta earum minima rem officiis autem cupiditate et dolor commodi aliquam, vitae laboriosam. Iste nam iusto consequatur quam, sunt, ad perspiciatis dolore ex expedita alias incidunt quo esse corrupti, similique voluptatem. Qui saepe vitae esse commodi.
</div>
</div>
<div id="2" class="read-more" onclick="expand(this.id)">Expand</div>
</div> Комментарии:
1. Привет, Нитиш, спасибо за ответ, но я написал «Развернуть» и «Свернуть» только для демонстрации. Изначально я использую dashicons (стрелка вниз для расширения и стрелка вверх для свертывания), поскольку мне нужно интегрировать этот код в WordPress.
2. Обновление: я сделал это, проверив, равна ли высота элемента fit-content, и это сработало нормально. Спасибо за идею!
3. @RajanChopra Если
innerHTMLэто просто для демонстрации, вы могли бы добавить пользовательский атрибут к этому элементу html, скажемnodeStatus, и соответствующим образом переключать элементы.