Question

场景：我有一个显示帖子类型（视频）查询的链接列表。有一个CTA可以观看链接到YouTube的视频。

更改：当用户点击CTA按钮时，我正在更改功能以执行模式/表单。我想在他们点击的模式中显示视频/链接的标题。我坚持这一部分，因为它只展示了最新的标题。我也喜欢在隐藏的表单字段中填充资产网址（以前的直接链接）。

查询视频的代码

＆＃13;

<a name="webinars"></a>
			<img class="title-icon" src="<?php bloginfo('stylesheet_directory'); ?>/images/icon_video.png" width="64" height="60" alt="">
			<h3>Webinars</h3>
			<div class="container container--discover text-center">
				<div class="row">
					<?php $args  = array('post_type' => array('videos'), 'showposts' => 3 ) ?>
					<?php query_posts($args); ?>
					<?php while (have_posts()) : the_post(); ?>
						<div class="asset asset--video col-sm-4">
<a href="#" onclick="ga('send', 'event', 'Video', 'Clicked', '<?php the_title(); ?>');" rel="bookmark" data-reveal-id="formModal"><div class="post" id="post-<?php the_ID(); ?>">
								<div class="thumb <?php if ( in_category('enterprise-technology-solutions') ) { ?>thumb--yellow<?php } elseif ( in_category('digital-solutions') ) { ?>thumb--orange<?php } else { ?>thumb--green<?php } ?>"><?php if ( has_post_thumbnail() ) { the_post_thumbnail("medium"); }	else { echo '<img src="' . get_bloginfo( 'stylesheet_directory' ) . '/images/thumb-default.jpg" />'; } ?></div>
								<h5><?php the_title(); ?></h5>
								<?php the_excerpt(); ?><br>
								<div class="btn btn--black btn--short">View Now</div>
							</div></a>
						</div>
					<?php endwhile; ?>
				</div>

＆＃13;

代码模式

＆＃13;

<div id="formModal" class="reveal-modal">
	<div class="contact-form">
		<?php $args  = array('post_type' => array('videos'), 'showposts' => 1) ?>
		<?php query_posts($args); ?>
		<?php while (have_posts()) : the_post(); ?>
	
		<h3><?php the_title(); ?></h3>
     

		<form action="...">


<input id="field0" name="firstName" type="text" required pattern="[a-zA-Z]+" placeholder="First Name" />
<input id="field1" name="lastName" type="text"  required pattern="[a-zA-Z]+" placeholder="Last Name" />
<input id="field4" name="emailAddress" type="text" required placeholder="Email" />
<input id="field2" name="company" type="text" placeholder="Company" />
<input id="field3" name="title" type="text" placeholder="Title" />
<input id="field5" name="busPhone" type="text" placeholder="Business Phone" />

<input id="field7" type="hidden" name="ViewNow" value="<?php echo get_post_meta($post->ID, 'asset-address', true); ?>"  />
<input type="submit" value="Send" class="submit right btn btn--form">


		</form>
      <a class="close-reveal-modal">&#215;</a>          
   <?php endwhile; ?>	
</div>

＆＃13;

这甚至可以用PHP，还是jQuery / JS是更好的解决方案？

Answer 1

如果您只想在PHP中执行此操作，则每个视频都需要单独的模式HTML。每个链接的模态目标都必须针对该视频的特定目标，所以不要（我猜这就是你如何定位你的模态）：

   static T[][] ToJag<T>(T[,] source)
    {
        try
        {
            int FirstDim = source.GetLength(0);  // rows
            int SecondDim = source.GetLength(1); // cols

            var result = new T[FirstDim][];   // only acceptable syntax ???
            for (int i = 0; i < FirstDim; ++i)
            {
                result[i] = new T[source.GetLength(1)];  // just for columns
                for (int j = 0; j < SecondDim; ++j)
                {
                    result[i][j] = source[i, j];
                }
            }

            return result;
        }
        catch (InvalidOperationException)
        {
            throw new InvalidOperationException("Invalid operation error.");
        }
    }
    static T[,] To2D<T>(T[][] source)
    {
        try
        {
            int FirstDim = source.Length;
            int SecondDim = source.GroupBy(row => row.Length).Single().Key; // throws InvalidOperationException if source is not rectangular

            var result = new T[FirstDim, SecondDim];
            for (int i = 0; i < FirstDim; ++i)
                for (int j = 0; j < SecondDim; ++j)
                    result[i, j] = source[i][j];

            return result;
        }
        catch (InvalidOperationException)
        {
            throw new InvalidOperationException("The given jagged array is not rectangular.");
        }
    }

您可以尝试：

<a href=.... data-reveal-id="formModal" ...>

这样它们都是唯一可识别的。

然后你需要再次循环，生成所有模态，标题和视频网址：

<a href=.... data-reveal-id="formModal-<?php the_ID(); ?>" ...>

显然，这不是很优雅 - 大量重复的HTML，大页面大小等。另一种方法是使用Javascript，只有一个模式，根据点击的链接动态更新。你可以这样做，比如包括你想要动态添加到模态的数据作为每个链接的数据：

<?php rewind_posts(); // Think you'll need this to have the loop 2x on one page ?>
<?php while (have_posts()) : the_post(); ?>
    <div id="formModal-<?php the_ID(); ?>" class="reveal-modal">
        ...
    </div>
<?php endwhile; ?>

然后在JS中，您获取该数据并将其添加到模态（使用jQuery的示例代码）：

<a href='' data-video='url-to-video' data-title='video-title' ...>

WordPress：在模态中查询帖子 - 显示标题

1 个答案: