Question

我正在尝试使用WordPress和自定义循环在Flickity轮播中显示图像。每个图像在单击时都会在Bootstrap模式中显示不同的文章。一切正常。

感谢this post上的乔纳森·奥尔特加（Jonathan Ortega），我几乎成功地根据用户的点击在网址中添加了模式哈希。问题是我在URL中得到“ ... /＃undefined”，而不是确切的模式名称。奇怪的是，如果我使用“ 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')，同样的问题。

非常感谢！

Answer 1

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

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

jQuery / Bootstrap 4：使用window.location.hash在URL中获取模式哈希会产生“ #undefined”

1 个答案: