JS-скрипт для фильтрации раздела div не работает с загрузкой карусели?
Я давно над этим работаю, но пока еще далек от решения. Прямо сейчас у меня есть огромные страницы с тоннами DIV, которые нужно скрывать, пока кто-нибудь не выберет их. Обычно это работает нормально, но когда мне нужно показать div, где внутри есть карусель, карусель начнет показывать все изображения вместо того, чтобы показывать по одному за раз.
Прошу прощения за мой плохой английский, заранее спасибо
*************ОБНОВИТЬ***************
Ну, я нашел причину, но все еще не решение. Iusse - это карусель, которая не работает, если она находится в скрытом div во время загрузки страницы. есть ли способ запустить его, когда его div стал видимым из скрытого? Использование карусельного бутстрапа, заранее спасибо
$(document).ready(function() {
// Handler for .ready() called.
var value = this.value,
all = $('.item'),
selected = all.filter('.' + "none");
all.hide();
selected.show();
$('#item-filter-select').change(function() {
var value = this.value,
all = $('.item'),
selected = all.filter('.' + value);
all.hide();
selected.show();
});
});<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "item-filter portfolio-filter cbp-l-filters-button text-center">
<form>
<select id = "item-filter-select">
<option value = "none" id = "none">select</option>
<option value = "test" id = "test">testPlan</option>
<option value = "try" id = "try">Try</option>
</select>
</form>
</div>
<div class = "item-display" id = "item-display">
<div class = "item test" id = "item-test" data-type = "test">
<div class = "cbp-item test">
<div class = "container text-center pt150 pb140">
<div class = "service-desc pb60 bg-white">
<h3>H3 TEST</h3>
<h4></h4>
</div>
<br>
<p>
some text
</p>
<div class = "row bg-gray pt40 pb40">
<div class = "col-lg-1">
</div>
<!-- team member -->
<div class = "col-lg-5 wow fadeInDown" data-wow-duration = "500ms" data-wow-delay = "200ms">
<article class = "team-mate">
<div class = "member-photo">
<!-- features media -->
<div id = "myCarousel20" class = "carousel slide col-lg-12 feature-media wow fadeInUp" data-wow-duration = "500ms" data-ride = "carousel">
<!-- Indicators -->
<ol class = "carousel-indicators">
<li data-target = "#myCarousel20" data-slide-to = "0" class = "active"></li>
<li data-target = "#myCarousel20" data-slide-to = "1"></li>
<li data-target = "#myCarousel20" data-slide-to = "2"></li>
<li data-target = "#myCarousel20" data-slide-to = "3"></li>
</ol>
<!-- Wrapper for slides -->
<div class = "carousel-inner" role = "listbox">
<div class = "item test active">
<img src = "https://cdn2.iconfinder.com/data/icons/pretty-office-10/24/Test-paper-24.png" class = "img-center" alt = "">
</div>
<div class = "item test ">
<img src = "https://image.freepik.com/free-icon/test-quiz_318-86103.jpg" class = "img-center" alt = "">
</div>
<div class = "item test">
<img src = "https://cdn2.iconfinder.com/data/icons/pretty-office-10/24/Test-paper-24.png" class = "img-center" alt = "">
</div>
</div>
</div>
</div>
<!-- member name & designation -->
<div class = "member-title">
<h3>test</h3>
<span></span>
</div>
<!-- /member name & designation -->
<!-- about member -->
<div class = "member-info">
<p>
</p>
</div>
<!-- /about member -->
</article>
</div>
<!-- end team member -->
<div class = "col-lg-1">
</div>
</div>
<!-- End row -->
</div>
</div>
</div>Мне нужна дополнительная информация, чтобы помочь. Какое состояние вы пытаетесь отфильтровать?
Да, извините. Что я пытаюсь сделать, так это иметь опцию фильтрации (кнопка выбора), которая помогает мне показывать div, которые обычно скрываются при первой загрузке страницы. Обычно скрипт, который я использую, работает нормально, когда div, который я должен показать, состоит из «text, img, text». Проблема начинается, когда в div есть «текст, изображения карусели, текст», потому что карусель не будет работать должным образом, заразить она будет отображать все изображения вместе вместо того, чтобы показывать по одному.
P.S, если вы прокрутите страницу вниз (marcodavi.it/prova/vendita-immobili-pragelato.php) и перейдите к опции выбора и выберите «ЭТО», вы увидите, что я говорю :)
В приведенном выше примере кода у вас есть класс item; Я считаю, что это должен быть carousel-item. Если я правильно смотрю, на вашем веб-сайте ваша карусель неправильно отформатирована. Появится пара изображений, но когда я проверю исходный код в вашем html, у вас есть класс carousel для каждого div, окружающего одно изображение, и один item внутри него. Опять должен быть carousel-item
Не уверен, что я ясно изложил свой последний комментарий, но класс carousel должен быть родительским для всех включенных изображений, и они должны иметь класс carousel-item.
да, у большинства моих div есть карусель только с одним изображением только потому, что после того, как я увидел, как работает карусель, я на данный момент удалил другие изображения, просто чтобы посмотреть, в порядке ли стиль страницы. Вернемся к сценарию, я не уверен, правильно ли я понял, вы говорите, что я должен поместить элемент карусели вместо элемента? можешь привести мне пример? Спасибо большое
Я говорю, что класс для элемента карусели должен быть carousel-item, а не item
Я добавил ответ с рабочим примером загрузочной карусели. Попробуйте так настроить свою. Я думаю, что основная проблема, с которой вы столкнулись, - это неправильное имя класса.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Что ж, в конце концов, я нашел решение. Я немного изменил сценарий на этот:
$(document).ready(function() {
// Handler for .ready() called.
var value = this.value,
all = $('.item'),
selected = all.filter('.' + "none");
all.hide();
selected.show();
$('#item-filter-select').change(function() {
var value = this.value,
all = $('.item'),
selected = all.filter('.' + value);
if (value=='test'){
all.hide();
$('#item-test').load(document.URL + ' #item-test');
selected.show();
}else{
all.hide();
selected.show();
}
});
});
Теперь каждый раз, когда я выбираю скрытый div с каруселью внутри, он сначала снова загружает div [$ ('# item-test'). Load (document.URL + '# item-test'); ], а затем он покажет его [selected.show (); ].
Надеюсь, это будет полезно для других.
Не могли бы вы уточнить, что именно вы пытаетесь сделать со своим javascript?