Modals using loops and ACF

时间：2018-11-16 作者：Hans V.

我试图制作一个页面，查询特定类别（“景点”）的每一篇帖子。

我已经能够成功地获得帖子，我只需要让modals工作。

我在我的循环中做了一个按钮，它的标题是循环所在的任何帖子。我希望这样，每当人们单击该按钮时，它就会打开一个模式，显示代码中ACF I列表中的所有字段。

不过，我有一些问题。由于某种原因，我无法让javascript正常工作。现在都在页面模板文件中，但我已经尝试通过函数将脚本排队。php等。

我的猜测是，我正在尝试制作文档。getElementsByClassName而不是documents。getElementById。我想使用id，但由于循环是创建按钮的原因，我不知道如何使id唯一。我在考虑将id作为循环的计数器之类的东西，然后将其存储在一个变量中，我可以在脚本中引用它，这样我就可以执行getElementsById（$someVariable）

感谢您的关注！

<?php 


get_header();


$args = array(
    \'post_type\' => \'post\',
    \'post_status\' => \'publish\',
\'category_name\' => \'attractions\',
\'posts_per_page\' => 10,
);


$arr_posts = new WP_Query( $args );

if ( $arr_posts->have_posts() ) :

while ( $arr_posts->have_posts() ) :
    $arr_posts->the_post();

get_posts($args);

//vars below


?>
<div class=attractions-wrap>
<button class="openAttractions"><?php the_title(); ?></button>
</div>

<div class="attractionsModal">
<div class=modal-content>
    <span class="close">&times;</span>
    <h2><?php the_title(); ?></h2>

    <div id="attraction-descrption" class="description">
        <h3>Description</h2>
        <p><?php the_field(\'description_field\'); ?></p>
    </div>

    <div id="attraction-opening-hours" class="opening-hours">
        <h3>Opening Hours</h2>
        <p><?php the_field(\'opening_hours_field\'); ?></p>
    </div>

    <div id="attraction-practical-information" class="practical-information">
        <h3>Practical Information</h2>
        <p><?php the_field(\'practical_information_field\'); ?></p>
    </div>

</div>
</div>

<?php
endwhile;
endif;
?>

<script type="text/javascript">
// Get the modal
var modal = document.getElementsByClassName(\'attractionsModal\');

// Get the button that opens the modal
var btn = document.getElementsByClassName("openAttractions");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on the button, open the modal 
btn.onclick = function() {
modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
    modal.style.display = "none";
}
}
</script>

2 个回复

最合适的回答,由SO网友:admcfajn 整理而成

你说得对，你应该用身份证。

我会将计数器与get\\u the\\u ID（）结合使用；

$arr_posts = new WP_Query( $args );

if ( $arr_posts->have_posts() ) :
$index = 0;
while ( $arr_posts->have_posts() ) : $arr_posts->the_post();

  echo $index . \'_\' . get_the_ID();

  endwhile;
endif;

这将为您提供一个唯一的id，您可以将其用于循环中的每个项目。

WordPress有一个内置的$索引变量。我们可以将其改写为：

$arr_posts = new WP_Query( $args );

if ( $arr_posts->have_posts() ) :

while ( $arr_posts->have_posts() ) : $arr_posts->the_post();

  echo $arr_posts->current_post . \'_\' . get_the_ID();

  endwhile;
endif;

SO网友:Hans V.

解决了问题！再次感谢admcfajn的帮助。我没有按照你的建议走正确的路线，但你的回答无疑为我指明了正确的方向，并引导我解决了我的问题。

下面是页面模板的完整代码，包括while循环中的JS，供任何偶然发现本文的人使用。

EDIT: 我忘了还为关闭按钮的id创建一个变量。下面我已经更改了代码，以包括关闭按钮：）

<?php 


get_header();


$args = array(
    \'post_type\' => \'post\',
    \'post_status\' => \'publish\',
    \'category_name\' => \'attractions\',
    \'posts_per_page\' => 10,
);


$arr_posts = new WP_Query( $args );

if ( $arr_posts->have_posts() ) :

    while ( $arr_posts->have_posts() ) : $arr_posts->the_post();

get_posts($args);

echo $arr_posts->current_post . \'_\' . get_the_ID();


//vars below
$trigger_ID = \'trigger_\' . $arr_posts->current_post . \'_\' . get_the_ID();
$modal_ID = \'modal_\' . $arr_posts->current_post . \'_\' . get_the_ID();
$close_ID = \'close_\' . $arr_posts->current_post . \'_\' . get_the_ID();


?>

<button class="trigger" id="<?php echo $trigger_ID ?>"><?php the_title(); ?></button>

<div class="modal" id="<?php echo $modal_ID ?>">
    <div class="modal-content">
        <span class="close-button" id="<?php echo $close_ID ?>">&times;</span>
        <h2><?php the_title(); ?></h2>

        <div id="attraction-descrption" class="description">
            <h3>Description</h2>
            <p><?php the_field(\'description_field\'); ?></p>
        </div>

        <div id="attraction-opening-hours" class="opening-hours">
            <h3>Opening Hours</h2>
            <p><?php the_field(\'opening_hours_field\'); ?></p>
        </div>

        <div id="attraction-practical-information" class="practical-information">
            <h3>Practical Information</h2>
            <p><?php the_field(\'practical_information_field\'); ?></p>
        </div>

    </div>
</div>

<!-- 

JavaScript for button press below

-->
<script>

$(document).ready(function(){
var modal = document.querySelector("#<?php echo $modal_ID; ?>");
var trigger = document.querySelector("#<?php echo $trigger_ID; ?>");
var closeButton = document.querySelector("#<?php echo $close_ID ?>");

function toggleModal() {
    modal.classList.toggle("show-modal");
}

function windowOnClick(event) {
    if (event.target === modal) {
        toggleModal();
    }
}

trigger.addEventListener("click", toggleModal);
closeButton.addEventListener("click", toggleModal);
window.addEventListener("click", windowOnClick);
});

</script>

<?php
    endwhile;
endif;
?>

下面还有一个样式表，它可以在javascript将其打开或关闭时使这一切正常运行。

.modal {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transform: scale(1.1);
    transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
}
.modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 1rem 1.5rem;
    width: 24rem;
    border-radius: 0.5rem;
}
.close-button {
    float: right;
    width: 1.5rem;
    line-height: 1.5rem;
    text-align: center;
    cursor: pointer;
    border-radius: 0.25rem;
    background-color: lightgray;
}
.close-button:hover {
    background-color: darkgray;
}
.show-modal {
    opacity: 1;
    visibility: visible;
    transform: scale(1.0);
    transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
}
.modal.show-modal{
    display: block !important;
}

结束

如何在WordPress插件页面上禁用jQuery插件

我为一位客户创建了一个WordPress搜索插件。它在我的网站上运行正常，但当我把它安装到我客户的网站上时，它坏了，因为jquery.formstyller 插件安装在那里，这显然是我在插件中使用的下拉列表的样式，它有自己的div和样式。当用户登陆插件页面进行搜索时，有没有办法关闭该插件？

<?php get_header(); $args = array( \'post_type\' => \'post\', \'post_status\' => \'publish\', \'category_name\' => \'attractions\', \'posts_per_page\' => 10, ); $arr_posts = new WP_Query( $args ); if ( $arr_posts->have_posts() ) : while ( $arr_posts->have_posts() ) : $arr_posts->the_post(); get_posts($args); //vars below ?> <div class=attractions-wrap> <button class="openAttractions"><?php the_title(); ?></button> </div> <div class="attractionsModal"> <div class=modal-content> <span class="close">×</span> <h2><?php the_title(); ?></h2> <div id="attraction-descrption" class="description"> <h3>Description</h2> <p><?php the_field(\'description_field\'); ?></p> </div> <div id="attraction-opening-hours" class="opening-hours"> <h3>Opening Hours</h2> <p><?php the_field(\'opening_hours_field\'); ?></p> </div> <div id="attraction-practical-information" class="practical-information"> <h3>Practical Information</h2> <p><?php the_field(\'practical_information_field\'); ?></p> </div> </div> </div> <?php endwhile; endif; ?> <script type="text/javascript"> // Get the modal var modal = document.getElementsByClassName(\'attractionsModal\'); // Get the button that opens the modal var btn = document.getElementsByClassName("openAttractions"); // Get the <span> element that closes the modal var span = document.getElementsByClassName("close")[0]; // When the user clicks on the button, open the modal btn.onclick = function() { modal.style.display = "block"; } // When the user clicks on <span> (x), close the modal span.onclick = function() { modal.style.display = "none"; } // When the user clicks anywhere outside of the modal, close it window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; } } </script>

$arr_posts = new WP_Query( $args ); if ( $arr_posts->have_posts() ) : $index = 0; while ( $arr_posts->have_posts() ) : $arr_posts->the_post(); echo $index . \'_\' . get_the_ID(); endwhile; endif;

$arr_posts = new WP_Query( $args ); if ( $arr_posts->have_posts() ) : while ( $arr_posts->have_posts() ) : $arr_posts->the_post(); echo $arr_posts->current_post . \'_\' . get_the_ID(); endwhile; endif;

<?php get_header(); $args = array( \'post_type\' => \'post\', \'post_status\' => \'publish\', \'category_name\' => \'attractions\', \'posts_per_page\' => 10, ); $arr_posts = new WP_Query( $args ); if ( $arr_posts->have_posts() ) : while ( $arr_posts->have_posts() ) : $arr_posts->the_post(); get_posts($args); echo $arr_posts->current_post . \'_\' . get_the_ID(); //vars below $trigger_ID = \'trigger_\' . $arr_posts->current_post . \'_\' . get_the_ID(); $modal_ID = \'modal_\' . $arr_posts->current_post . \'_\' . get_the_ID(); $close_ID = \'close_\' . $arr_posts->current_post . \'_\' . get_the_ID(); ?> <button class="trigger" id="<?php echo $trigger_ID ?>"><?php the_title(); ?></button> <div class="modal" id="<?php echo $modal_ID ?>"> <div class="modal-content"> <span class="close-button" id="<?php echo $close_ID ?>">×</span> <h2><?php the_title(); ?></h2> <div id="attraction-descrption" class="description"> <h3>Description</h2> <p><?php the_field(\'description_field\'); ?></p> </div> <div id="attraction-opening-hours" class="opening-hours"> <h3>Opening Hours</h2> <p><?php the_field(\'opening_hours_field\'); ?></p> </div> <div id="attraction-practical-information" class="practical-information"> <h3>Practical Information</h2> <p><?php the_field(\'practical_information_field\'); ?></p> </div> </div> </div>  <script> $(document).ready(function(){ var modal = document.querySelector("#<?php echo $modal_ID; ?>"); var trigger = document.querySelector("#<?php echo $trigger_ID; ?>"); var closeButton = document.querySelector("#<?php echo $close_ID ?>"); function toggleModal() { modal.classList.toggle("show-modal"); } function windowOnClick(event) { if (event.target === modal) { toggleModal(); } } trigger.addEventListener("click", toggleModal); closeButton.addEventListener("click", toggleModal); window.addEventListener("click", windowOnClick); }); </script> <?php endwhile; endif; ?>

.modal { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); opacity: 0; visibility: hidden; transform: scale(1.1); transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s; } .modal-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: white; padding: 1rem 1.5rem; width: 24rem; border-radius: 0.5rem; } .close-button { float: right; width: 1.5rem; line-height: 1.5rem; text-align: center; cursor: pointer; border-radius: 0.25rem; background-color: lightgray; } .close-button:hover { background-color: darkgray; } .show-modal { opacity: 1; visibility: visible; transform: scale(1.0); transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s; } .modal.show-modal{ display: block !important; }

如何读取WordPress$Query关联数组(散列)键的值

WordPress编程新手（来自更为传统的环境），并试图了解其一些“独特”特性。我们的网站上有一个目录页，此代码驻留在functions.php, 如果条件为true，则调整结果。if( $query->is_post_type_archive( \'directory\' ) ){ ...//do stuff } 我想知道如何获取is_post_type_archive 这就是“目录”当我对值使用测试时。。。var_dumb($query->is_post

小码农CODE

Modals using loops and ACF

相关推荐

如何在WordPress插件页面上禁用jQuery插件

小码农CODE

Modals using loops and ACF

相关推荐

如何读取WordPress$Query关联数组(散列)键的值