jQuery/Bootstrap 4:使用window.location.hash获取URL中的模态散列给出“未定义”

Question

我正在尝试使用WordPress和一个自定义循环来在Flickity旋转木马中显示图像。每个图片显示不同的文章在一个启动模式点击。一切都正常运转。

多亏了this post上的Jonathan，我几乎成功地在URL中添加了模式散列，这取决于用户的点击。问题是，我在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 1”，只是为了测试，但是同样的事情发生了。

我还尝试用$(window.location.hash).modal('toggle')修改脚本中的$(window.location.hash).modal('toggle')，同样的问题。

非常感谢！

Answer 1

由于$('li[data-toggle="modal"]') 没有href属性，所以我想您要使用data-target

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