在php循环中包含javascript函数

我使用wordpress从帖子中抓取第一个图片附件。这很好：

    <?php
        global $post;
  $args = array( 
    'post_parent' => $post->ID, 
    'post_type' => 'attachment', 
    'post_mime_type' => 'image', 
    'orderby' => 'menu_order', 
    'order' => 'ASC', 
    'numberposts' => 2 );
   $images = get_posts($args);
   if ( $images ) {
    $i = 0;
    while($i <= 1){
        $image = wp_get_attachment_url( $images[$i]->ID );
    echo "<img src='$image' />";            
      $i++;     
    }
  }
 ?>

我还试图处理这些图像，它与timthumb一起根据浏览器大小调整图像大小。我只能在这两张图片中的一张上使用。我希望它记录日志并调整大小两次，但脚本没有在循环中运行。有人能帮忙吗？这就是我正在使用的完整剪报的样子：

    <?php
        global $post;
  $args = array( 
    'post_parent' => $post->ID, 
    'post_type' => 'attachment', 
    'post_mime_type' => 'image', 
    'orderby' => 'menu_order', 
    'order' => 'ASC', 
    'numberposts' => 2 );
   $images = get_posts($args);
   if ( $images ) {
    $i = 0;
    $z = 1;
    while($i <= 1){
        $image = wp_get_attachment_url( $images[$i]->ID );
    echo "<img src='$image' class='image_$z' />";   
        ?>
    <script type="text/javascript">
    var image = "<?php echo $image ; ?>";
    var under700_<? echo $z ?> = "/wp-content/themes/Loupe/scripts/timthumb.php?src=<? echo $image ?>&w=340";
     var under900_<? echo $z ?> = "/wp-content/themes/Loupe/scripts/timthumb.php?src=<? echo $image ?>&w=440";

     function imageresize() { 
       var contentwidth = $('#two_up').width();  
         if ((contentwidth) < '700'){   
             console.log('under 700_<? echo $z ?>' + under700_<? echo $z ?>);   
             $('img .image_<? echo $z ?>').attr('src', under700_<? echo $z ?>);
             } else if ((contentwidth) < '900') {
            // console.log('under 900');             
             $('img .image_<? echo $z ?>').attr('src', under900_<? echo $z ?>);
             }
              else {
              image;
             }
     }
        </script>
    <?php
      $i++;
      $z++;
    }
  }
 ?>

var image=“”；
var under700_u979;=“/wp content/themes/Loupe/scripts/timtumb.php？src=&w=340”；
var under900_u979;=“/wp content/themes/Loupe/scripts/timtumb.php？src=&w=440”；
函数imageresize（）{
var contentwidth=$（'two#u up'）.width（）；
如果（（contentwidth）<'700'）{
console.log（'700_'以下+700_'以下）；
$（'img.image'）.attr（'src'，在700下）；
}如果（（contentwidth）<'900'）{
//控制台日志（“低于900”）；
$（'img.image'）.attr（'src'，在900下）；
}
否则{
形象
}
}

使用

json_encode（）

它生成一个PHP变量的JavaScript对象（或数组或组合），并使其成为使用

json_encode（）

它生成一个PHP变量的JavaScript对象（或数组或组合），并使其成为我假设

$images

是一个数组；如果没有，请调整此解决方案以适合

Javascript:

var images = <? echo json_encode($images); ?>;
for( x=0; x<images.length-1; x++)
{
    someFunction(images[x]);
}

var图像=；
对于（x=0；x我假设
$images
是一个数组；如果不是，则调整此解决方案以适合

Javascript:

var images = <? echo json_encode($images); ?>;
for( x=0; x<images.length-1; x++)
{
    someFunction(images[x]);
}

var图像=；
对于（x=0；x我猜你想做的事情是这样的：

<?php
global $post;
$args = array( 
  'post_parent' => $post->ID, 
  'post_type' => 'attachment', 
  'post_mime_type' => 'image', 
  'orderby' => 'menu_order', 
  'order' => 'ASC', 
  'numberposts' => 2 
);
$images = get_posts($args);
if ( $images ) {
    $i = 0;
    ?>
    <script type="text/javascript">

        function imageresize(imgElement, srcString) {
            var under700 = "/wp-content/themes/Loupe/scripts/timthumb.php?src=" + srcString + "&w=340";
            var under900 = "/wp-content/themes/Loupe/scripts/timthumb.php?src=" + srcString + "&w=440";
            var contentwidth = $('#two_up').width();


            if ((contentwidth) < '700'){   
                console.log('under 700' + under700);   
                $(imgElement).attr('src', under700);

                imgElement.onload = ''; //stop the onload event from happening again
            } else if ((contentwidth) < '900') {
                // console.log('under 900');             
                $(imgElement).attr('src', under900);

                imgElement.onload = ''; //stop the onload event from happening again
            }
            else {
                image; //don't know what to make of this (maybe you do)
            }
        }
    </script>
    <?php
    while($i < count($images)){
        $image = wp_get_attachment_url( $images[$i]->ID );
        echo "<img src='$image' class='image' onload='imageresize(this, \"$image\")' />";   
        $i++;
    }
}
?>


函数imageresize（imgElement，srcString）{
var under700=“/wp content/themes/Loupe/scripts/timtumb.php？src=“+srcString+”&w=340”；
var under900=“/wp content/themes/Loupe/scripts/timtumb.php？src=“+srcString+”&w=440”；
var contentwidth=$（'two#u up'）.width（）；
如果（（contentwidth）<'700'）{
控制台日志（'700'以下+700以下）；
$（imgElement）.attr（'src'，700下）；
imgElement.onload=''；//停止onload事件再次发生
}如果（（contentwidth）<'900'）{
//控制台日志（“低于900”）；
美元（imgElement）.attr（'src'，900以下）；
imgElement.onload=''；//停止onload事件再次发生
}
否则{
image；//不知道该怎么办（也许你会）
}
}

但是，正如@Toast之前所建议的那样：我会在PHP中这样做，并防止用户重新加载页面上的所有图像，因为这是通过上面的代码有效地完成的

如果您有要调整大小的源图像文件的路径，那么可以使用获取图像大小，并相应地调整图像的src uri

我唯一的猜测是，在您使用javascript进行此操作时，您正在使用DHTML/CSS框模型来帮助您计算图像的容器宽度（
#two_up
）。我强烈反对这样做，但上面的代码仍然可以工作！；）
我猜您正在尝试做的是这样的：

<?php
global $post;
$args = array( 
  'post_parent' => $post->ID, 
  'post_type' => 'attachment', 
  'post_mime_type' => 'image', 
  'orderby' => 'menu_order', 
  'order' => 'ASC', 
  'numberposts' => 2 
);
$images = get_posts($args);
if ( $images ) {
    $i = 0;
    ?>
    <script type="text/javascript">

        function imageresize(imgElement, srcString) {
            var under700 = "/wp-content/themes/Loupe/scripts/timthumb.php?src=" + srcString + "&w=340";
            var under900 = "/wp-content/themes/Loupe/scripts/timthumb.php?src=" + srcString + "&w=440";
            var contentwidth = $('#two_up').width();


            if ((contentwidth) < '700'){   
                console.log('under 700' + under700);   
                $(imgElement).attr('src', under700);

                imgElement.onload = ''; //stop the onload event from happening again
            } else if ((contentwidth) < '900') {
                // console.log('under 900');             
                $(imgElement).attr('src', under900);

                imgElement.onload = ''; //stop the onload event from happening again
            }
            else {
                image; //don't know what to make of this (maybe you do)
            }
        }
    </script>
    <?php
    while($i < count($images)){
        $image = wp_get_attachment_url( $images[$i]->ID );
        echo "<img src='$image' class='image' onload='imageresize(this, \"$image\")' />";   
        $i++;
    }
}
?>


函数imageresize（imgElement，srcString）{
var under700=“/wp content/themes/Loupe/scripts/timtumb.php？src=“+srcString+”&w=340”；
var under900=“/wp content/themes/Loupe/scripts/timtumb.php？src=“+srcString+”&w=440”；
var contentwidth=$（'two#u up'）.width（）；
如果（（contentwidth）<'700'）{
控制台日志（'700'以下+700以下）；
$（imgElement）.attr（'src'，700下）；
imgElement.onload=''；//停止onload事件再次发生
}如果（（contentwidth）<'900'）{
//控制台日志（“低于900”）；
美元（imgElement）.attr（'src'，900以下）；
imgElement.onload=''；//停止onload事件再次发生
}
否则{
image；//不知道该怎么办（也许你会）
}
}

但是，正如@Toast之前所建议的那样：我会在PHP中这样做，并防止用户重新加载页面上的所有图像，因为这是通过上面的代码有效地完成的

如果您有要调整大小的源图像文件的路径，那么可以使用获取图像大小，并相应地调整图像的src uri

我唯一的猜测是，在您使用javascript进行此操作时，您正在使用DHTML/CSS框模型来帮助您计算图像的容器宽度（
#two_up
）。我强烈反对这样做，但上面的代码仍然可以工作！；）
您可能希望使用
，为了最大的安全性，所以您总是生成有效的javascript，即使它将是一个简单的整数。查看代码的结构，您将在“while”语句中多次重复“function imageresize（）”。我不确定你在找什么。尝试使用jQuery访问$（“img.image_1”）.onload（imageresize）；同意布兰特的观点。您在哪里调用imageresize（）函数？不，您是对的。。在粘贴这个问题之前，我确实在它之外有它。。。我将继续使用它，感谢Brantpart，我的问题是我不知道如何将php循环中生成的图像路径传递给函数的变量。我想我可以使用jQuery通过它的选择器获取img src，但似乎一定有更好的方法。您可能想使用
，只是为了最大的安全性，以便始终生成有效的javascript，即使它是一个简单的