#html #jquery #css
#HTML #jquery #css
Вопрос:
Я хотел бы создать серию изображений фруктов и овощей, чтобы название этого фрукта или овоща отображалось по центру под изображением. Затем я хотел бы использовать Jquery append, чтобы имена отображались при нажатии кнопки
($(document).ready(function() {
$("#btn1").click(function() {
$("p").append(" <b>Appended text</b>.");
});
В настоящее время я использую ul li, чтобы изображения отображались одно за другим в стиле галереи. Я также хотел бы, чтобы изображения были центрированы на странице.
Большое спасибо за любую помощь!
$(document).ready(function() {
$(".applecontainer").click(function() {
$(".applebag,.apple").fadeToggle();
});
$(".lemoncontainer").click(function() {
$(".lemonbag,.lemon").fadeToggle();
});
$(".limecon").click(function() {
$(".limebag,.lime").fadeToggle();
});
}); img {
width: 200px;
height: auto;
}
ul {
list-style-type: none;
text-align: center;
}
li {
display: inline;
}
.applebag {
display: none;
}
.applecontainer {
width: 100%;
height: auto;
}
.lemonbag {
display: none;
}
.lemoncontainer {
width: 100%;
height: auto;
}
.limebag {
display: none;
}
.limecon {
width: 100%;
height: auto;
} <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<ul>
<li class="applecontainer">
<img class=apple src="apple.png" ;/>
<img class=applebag src="applebag.png" ;/> apple
</li>
<li class="lemoncontainer">
<img class=lemon src="lemon.png" ;/>
<img class=lemonbag src="lemonbag.png" ;/>
</li>
<li class="limecon">
<img class=lime src="lime.png" ;/>
<img class=limebag src="limebag.png" ;/>
</li>
</ul> Комментарии:
1. Ваша идея понятна… но как вы собираетесь размещать интерактивные элементы? Я имею в виду, что если вы собираетесь разместить интерактивную кнопку для каждого фрукта, это событие будет мешать интерактивному контейнеру! Итак, мы помещаем кнопки за пределы каждого контейнера, и при нажатии на них отображается легенда изображения этого контейнера?
2. Так что это только одна кнопка, которая отображает все названия фруктов… или кнопку для каждого контейнера с фруктами?
3. Вам лучше объяснить нам больше об ожидаемом дизайне «нетехническими словами»… Например, что будет загружено первым (изображения фруктов ..), Сколько кнопок мы видим в первую очередь? Сначала контейнер с фруктами выглядит пустым, затем мы нажимаем, чтобы показать его содержимое… это обязательно? Потому что, как я вижу, ваш скрипт будет немного странным после переключения 🙂
4. Привет, @Bilel! Я намерен разместить кнопку под названием «Имена» в верхней части страницы под заголовком. Когда кто-то нажимает «имена», все названия фруктов и овощей появятся под соответствующими изображениями. На данный момент появляются фрукты и овощи, и когда вы нажимаете на каждый фрукт, он превращается в изображение способа хранения этого фрукта или овоща. Я тоже хочу добавить возможность просмотра названий фруктов и овощей на случай, если кто-то не узнает более неясный.
5. @Bilel, это выглядит великолепно, спасибо. Я попробую это быстро. Есть ли способ, чтобы изображения отображались горизонтально одно за другим?
Ответ №1:
Я многое изменил в вашем коде… Может быть, слишком много вещей, лол!В любом случае, возьмите то, что вам полезно во всем этом.
Основные изменения:
- Я использовал несколько классов для «типа» элемента вместо определенного класса для каждого «фрукта», что значительно сократило CSS и обработчики событий.
- Я использовал CSS flexbox для центрирования элементов.
- Я использовал обратный вызов fadeToggle для анимации изображений одно за другим.
- Я использовал селектор:visible для определения видимого элемента.
Дайте мне знать, если у вас возникнут какие-либо вопросы.
$(document).ready(function () {
$(".fruitcontainer").click(function () {
let fruit = $(this).find(".fruit");
let fruitbag = $(this).find(".fruitbag");
if (fruit.is(":visible")) {
fruit.fadeToggle(800, function () {
fruitbag.each(function () {
$(this).fadeToggle(800);
});
});
} else {
fruitbag.fadeToggle(800, function () {
fruit.fadeToggle(800);
});
}
});
$("#showNames").click(function () {
$(".fruitname").fadeToggle();
});
}); img {
width: 200px;
height: auto;
}
ul {
list-style-type: none;
text-align: center;
display: flex;
flex-direction: row;
}
li {
display: inline;
}
.fruitbag,
.fruitname {
display: none;
}
.fruitname {
margin-bottom: -2em;
}
.fruitcontainer {
width: 100%;
height: 400px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
} <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="showNames">Names</button>
<ul>
<li class="fruitcontainer">
<img class="fruit" src="https://via.placeholder.com/200x200.png?text=apple.png" />
<img class="fruitbag" src="https://via.placeholder.com/200x200.png?text=applebag.png" />
<p class="fruitname">apple</p>
</li>
<li class="fruitcontainer">
<img class="fruit" src="https://via.placeholder.com/200x200.png?text=lemon.png" />
<img class="fruitbag" src="https://via.placeholder.com/200x200.png?text=lemonbag.png" />
<p class="fruitname">lemon</p>
</li>
<li class="fruitcontainer">
<img class="fruit" src="https://via.placeholder.com/200x200.png?text=lime.png" />
<img class="fruitbag" src="https://via.placeholder.com/200x200.png?text=limebag.png" />
<p class="fruitname">lime</p>
</li>
</ul> Комментарии:
1. Привет, @Louys, это потрясающе и красиво. Спасибо! Это намного чище. Я бы хотел, чтобы изображения были перенесены, и я попытался добавить «flex-flow: перенос строк;» в CSS ul, но тогда он показывает только одно изображение в строке. Знаете ли вы, какие изменения нужно внести, чтобы изображения отображались в соответствии с шириной окна браузера? Спасибо вам от всего сердца!
2. Попробуйте
flex-direction: column;ul, 😉3. Я чувствую, что что-то упускаю, @Louys. Я написал ul { list-style-type: none; text-align: center; display: flex; flex-direction: column; } но я все еще получаю только одно изображение на строку