jQuery / Bootstrap 4: использование window.location.hash для получения модального хэша в URL дает "#undefined" - PullRequest
Новая
       12

jQuery / Bootstrap 4: использование window.location.hash для получения модального хэша в URL дает "#undefined"

0 голосов
/ 06 апреля 2019

Я пытаюсь работать с WordPress и пользовательским циклом для отображения изображений в карусели Flickity.Каждое изображение отображает различные статьи в Bootstrap Modal по щелчку.Все работает правильно.

Благодаря Джонатану Ортеге на этом посте Мне почти удалось добавить модальный хеш в URL в зависимости от клика пользователя.Проблема в том, что я получаю "... / # undefined" в URL вместо точного модального имени.Странно то, что, если я загружаю страницу с помощью «www.MYWEBSITE.com/#MYMODAL», это работает очень хорошо, страница успешно открывается на желаемом модале.Но это не работает при клике.

Вот скрипт jQuery в заголовке: 

$(document).ready(function(){

// some other script....

$(window.location.hash).modal('show');
    $('li[data-toggle="modal"]').click(function(){
       window.location.hash = $(this).attr('href');
});

});

И мой собственный цикл WordPress, включающий модальное событие: 

<div class="slider slider--columns" data-arrows="true" data-paging="true">
<ul class="slides">

<?php 

$args = array(
'post_type' => 'MY_POST_TYPE',
'posts_per_page' => -1 
);

$MYPOSTTYPE = new WP_Query ($args);
if ($MYPOSTTYPE->have_posts() ):
    while ($MYPOSTTYPE->have_posts() ): $MYPOSTTYPE->the_post();

?>

<li class="col-sm-4 col-xs-6" data-toggle="modal" data-target="#modal<?php the_field('MODAL_ID_THING') ?>">
<div id="MY_ID" style="background-image: url(BGIMAGE.png) !important;"><img style="visibility: hidden;" alt="Image" src="dummyimage.png"></div>
</li>

<?php

endwhile; endif;
wp_reset_postdata();

?>
</div>
</ul>

Как видите, модал вызывается через <?php the_field('MODAL_ID_THING') ?>.Сначала я думал, что сценарию jQuery не нравится цикл PHP, поэтому вместо этого я ввел простое значение, ссылающееся на один из моих модалов, например "# modalnumber1", только для тестирования, но произошло то же самое.
Я также пыталсяизменить $(window.location.hash).modal('show') в скрипте с $(window.location.hash).modal('toggle'), та же проблема.

Большое спасибо!

1 Ответ

2 голосов
/ 06 апреля 2019

Поскольку $('li[data-toggle="modal"]') не имеет атрибут href, я полагаю, вы хотите использовать data-target: 

$('li[data-toggle="modal"]').click(function(){
    window.location.hash = $(this).data('target');
});
...