Javascript wordpress通过jquery自定义字段值

我正在开发一个底部有缩略图的jquery滑块，我希望它们与相关视频链接。我正在做的是，我添加了一个来自管理员的帖子，标题包含图像的标题，内容区域包含缩略图，对于视频链接，我添加了一个自定义字段

        </div>
        <div class="video-gallery">
            <a class="prev browse left"><<</a>
            <div class="scrollable" id="scrollable">
                <div class="items">
                    <?php if (have_posts()) : ?>
   <?php
  $thePosts = get_posts('numberposts=50&category=4');
  foreach($thePosts as $post) :
  setup_postdata($post);
  $custom_field = get_post_meta($post->ID,'video path', true);
  echo '<div class="myclass" style="display:none" id="'.$custom_field.'"></div>';
  the_content();?>
  <?php endforeach; ?>
  <?php else : ?>
   No Results
  <?php endif; ?>
                </div> 
            </div>

如果我只对图像（而不是视频）执行相同的过程，请再次访问slider，它工作正常。我点击底部的缩略图，大图像显示在滑块中。我得到了我点击这行代码的图像源

   var url = $(this).attr("src");

        </div>
        <div class="video-gallery">
            <a class="prev browse left"><<</a>
            <div class="scrollable" id="scrollable">
                <div class="items">
                    <?php if (have_posts()) : ?>
   <?php
  $thePosts = get_posts('numberposts=50&category=4');
  foreach($thePosts as $post) :
  setup_postdata($post);
  $custom_field = get_post_meta($post->ID,'video path', true);
  echo '<div class="myclass" style="display:none" id="'.$custom_field.'"></div>';
  the_content();?>
  <?php endforeach; ?>
  <?php else : ?>
   No Results
  <?php endif; ?>
                </div> 
            </div>

它给了我来自img标签的图像来源。一切都很好。但现在我的确切观点是，我想通过上面的代码获得自定义字段值，但我不知道如何做到这一点，因为我从互联网上随机尝试了很多方法，但对我来说没有任何效果

        </div>
        <div class="video-gallery">
            <a class="prev browse left"><<</a>
            <div class="scrollable" id="scrollable">
                <div class="items">
                    <?php if (have_posts()) : ?>
   <?php
  $thePosts = get_posts('numberposts=50&category=4');
  foreach($thePosts as $post) :
  setup_postdata($post);
  $custom_field = get_post_meta($post->ID,'video path', true);
  echo '<div class="myclass" style="display:none" id="'.$custom_field.'"></div>';
  the_content();?>
  <?php endforeach; ?>
  <?php else : ?>
   No Results
  <?php endif; ?>
                </div> 
            </div>

希望你们能理解我说的话，如果不是的话，我会在需要的时候用代码提供更多的细节

        </div>
        <div class="video-gallery">
            <a class="prev browse left"><<</a>
            <div class="scrollable" id="scrollable">
                <div class="items">
                    <?php if (have_posts()) : ?>
   <?php
  $thePosts = get_posts('numberposts=50&category=4');
  foreach($thePosts as $post) :
  setup_postdata($post);
  $custom_field = get_post_meta($post->ID,'video path', true);
  echo '<div class="myclass" style="display:none" id="'.$custom_field.'"></div>';
  the_content();?>
  <?php endforeach; ?>
  <?php else : ?>
   No Results
  <?php endif; ?>
                </div> 
            </div>

任何帮助都将不胜感激

        </div>
        <div class="video-gallery">
            <a class="prev browse left"><<</a>
            <div class="scrollable" id="scrollable">
                <div class="items">
                    <?php if (have_posts()) : ?>
   <?php
  $thePosts = get_posts('numberposts=50&category=4');
  foreach($thePosts as $post) :
  setup_postdata($post);
  $custom_field = get_post_meta($post->ID,'video path', true);
  echo '<div class="myclass" style="display:none" id="'.$custom_field.'"></div>';
  the_content();?>
  <?php endforeach; ?>
  <?php else : ?>
   No Results
  <?php endif; ?>
                </div> 
            </div>

这是我的完整代码（php和html）

        </div>
        <div class="video-gallery">
            <a class="prev browse left"><<</a>
            <div class="scrollable" id="scrollable">
                <div class="items">
                    <?php if (have_posts()) : ?>
   <?php
  $thePosts = get_posts('numberposts=50&category=4');
  foreach($thePosts as $post) :
  setup_postdata($post);
  $custom_field = get_post_meta($post->ID,'video path', true);
  echo '<div class="myclass" style="display:none" id="'.$custom_field.'"></div>';
  the_content();?>
  <?php endforeach; ?>
  <?php else : ?>
   No Results
  <?php endif; ?>
                </div> 
            </div>

没有结果

下面是javascript jquery

        </div>
        <div class="video-gallery">
            <a class="prev browse left"><<</a>
            <div class="scrollable" id="scrollable">
                <div class="items">
                    <?php if (have_posts()) : ?>
   <?php
  $thePosts = get_posts('numberposts=50&category=4');
  foreach($thePosts as $post) :
  setup_postdata($post);
  $custom_field = get_post_meta($post->ID,'video path', true);
  echo '<div class="myclass" style="display:none" id="'.$custom_field.'"></div>';
  the_content();?>
  <?php endforeach; ?>
  <?php else : ?>
   No Results
  <?php endif; ?>
                </div> 
            </div>

   <script type="text/javascript">
$(".video-gallery img").click(function() {
// see if same thumb is being clicked
if ($(this).hasClass("active")) { return; }

// calclulate large image's URL based on the thumbnail URL (flickr specific)
var url = $('.myclass').attr('id');
alert(url);
// get handle to element that wraps the image and make it semi-transparent
var wrap = $(".image_wrap").fadeTo("medium", 0.5);

// the large image from www.flickr.com
var img = new Image();


// call this function after it's loaded
img.onload = function() {

    // make wrapper fully visible
    wrap.fadeTo("fast", 1);

    // change the image
    wrap.find("iframe").attr("src", url);

};

// begin loading the image from www.flickr.com
img.src = url;

// activate item
$(".video-gallery img").removeClass("active");
$(this).addClass("active");

  // when page loads simulate a "click" on the first image
 });
 </script>  

$（“.video gallery img”）。单击（函数（）{
//查看是否单击了相同的拇指
if（$（this）.hasClass（“活动”）{return；}
//基于缩略图URL计算大图像的URL（特定于flickr）
var url=$（'.myclass'）.attr（'id'）；
警报（url）；
//获取包裹图像并使其半透明的元素的句柄
var wrap=$（“.image_wrap”）.fadeTo（“中等”，0.5）；
//来自www.flickr.com的大图
var img=新图像（）；
//加载后调用此函数
img.onload=函数（）{
//使包装完全可见
包裹。法代托（“快速”，1）；
//更改图像
wrap.find（“iframe”）.attr（“src”，url）；
};
//开始从www.flickr.com加载图像
img.src=url；
//激活项目
$（“.video gallery img”）.removeClass（“活动”）；
$（此）.addClass（“活动”）；
//当页面加载时，模拟“单击”第一个图像
});

您需要使用该函数来检索所需的自定义字段，如下所示：

        </div>
        <div class="video-gallery">
            <a class="prev browse left"><<</a>
            <div class="scrollable" id="scrollable">
                <div class="items">
                    <?php if (have_posts()) : ?>
   <?php
  $thePosts = get_posts('numberposts=50&category=4');
  foreach($thePosts as $post) :
  setup_postdata($post);
  $custom_field = get_post_meta($post->ID,'video path', true);
  echo '<div class="myclass" style="display:none" id="'.$custom_field.'"></div>';
  the_content();?>
  <?php endforeach; ?>
  <?php else : ?>
   No Results
  <?php endif; ?>
                </div> 
            </div>

$custom_field = get_post_meta($post->ID,'CustomFieldName', true);

---

您可以使用前缀为data-的自定义属性，在检索每个缩略图时添加此属性：

        </div>
        <div class="video-gallery">
            <a class="prev browse left"><<</a>
            <div class="scrollable" id="scrollable">
                <div class="items">
                    <?php if (have_posts()) : ?>
   <?php
  $thePosts = get_posts('numberposts=50&category=4');
  foreach($thePosts as $post) :
  setup_postdata($post);
  $custom_field = get_post_meta($post->ID,'video path', true);
  echo '<div class="myclass" style="display:none" id="'.$custom_field.'"></div>';
  the_content();?>
  <?php endforeach; ?>
  <?php else : ?>
   No Results
  <?php endif; ?>
                </div> 
            </div>

<img data-video="get_post_meta($post->ID,'video_ulr', true);" src="...">

---

更多信息/示例，请参阅。

是的，你是对的，我已经知道我可以通过此函数获得它，但我想通过jqery而不是phpy获得它。你混合了客户端和服务器端。无法使用JQuery从远程服务器检索数据。您必须使用服务器端语言，如PHP。一旦检索到该值，就可以将其分配给JavaScript变量，并对其进行操作，如：var custom_field=@Matanya，您可以使用JSON从远程服务器检索数据；）@汤姆：我想你的意思是用AJAX检索JSON对象。这也是通过服务器端语言完成的，就像任何其他AJAX请求一样。返回的对象可能会被JSON_encode（）解析为JSON，但这不会改变实际数据检索是在服务器端使用服务器端语言进行的这一事实现在我编辑代码并检查它。当我提醒url时，它给了我未定义的信息。当我查看源代码并得到结果时，行echo“”不回显$custom_字段。在这里你可以看到id是空的我不知道why@KashifWaheed：您使用的引号不正确：请尝试以下操作：

echo'

@KashifWaheed:如果仍然获得空字符串，请尝试使用var_dump（$custom_field）获取函数返回的值（如果不存在此类字段，则应为“bool false”）@Matanya我这样做是因为你说的结果是可以的，它存在，我将结果保存在变量$custom_字段中，并尝试在下一行代码中使用它，但变量在下一行代码中变为空code@KashifWaheed，则表示您没有正确打印该行（删除该行中的单引号和点）

        </div>
        <div class="video-gallery">
            <a class="prev browse left"><<</a>
            <div class="scrollable" id="scrollable">
                <div class="items">
                    <?php if (have_posts()) : ?>
   <?php
  $thePosts = get_posts('numberposts=50&category=4');
  foreach($thePosts as $post) :
  setup_postdata($post);
  $custom_field = get_post_meta($post->ID,'video path', true);
  echo '<div class="myclass" style="display:none" id="'.$custom_field.'"></div>';
  the_content();?>
  <?php endforeach; ?>
  <?php else : ?>
   No Results
  <?php endif; ?>
                </div> 
            </div>