Question

我正在尝试使用php显示文件夹中的所有文件，并在每个图像旁边放置一个单选按钮。当选择单选按钮时，我想在页面的某处重新显示图像。最终目标是拥有三个图像集合，用户可以选择三个并一起查看选择，作为三联画。

我知道我必须实现一些onclick代码，但我不知道如何去做。

我的代码：

 <?php


$dir = "image_gallery/";

//open dir
if ($opendir = opendir($dir))
{
 //read dir
while (($file = readdir ($opendir)) !==FALSE)
 { 
    if ($file!="."&&$file!=".."&&$file!="DS_Store")
    echo "<img src='$dir/$file' width='200'><input type='radio' value='$file' name='filename'><br>";
    //echo "<input type='radio' value='yes' name='$file' />";

 }

}

?>
 <input type="submit" name="submit" value="That's Right!">

 </form>
</body>
</html>

我希望能够显示$ file变量onclick而不是将所有图像源读入数组并调用数组的第n个条目。

我感谢任何意见。

还指向工作代码http://www.evan-livingston.com/test/list.php

的链接

修改

无效代码;

  <html>
<head>
<script type="text/javascript">
function listSelectedImages() {
    var selected = $('input[type=radio]:checked'),
        selection = $.map(selected, function(e){
            return e.value;
        });
    $('#selection').text(selection.join(', '));
}

$('input[type=radio]').change(listSelectedImages);
</script>
</head>
<body>
<form action="bad_words.php" method=post>
    <a href="../main.page.php">back to main page</a>
    <br/>
    <br/>

    <img src='image_gallery//11.01.29.3-13.jpg' width='200'>
    <input type='radio' value='11.01.29.3-13.jpg' name='filename'>

    <br>
    <img src='image_gallery//11.01.29.3-3.jpg' width='200'>
    <input type='radio' value='11.01.29.3-3.jpg' name='filename'>

    <br>
    <input type="submit" name="submit" value="That's Right!">

</form>
<div id="selection"></div>
</body>
</html>

Answer 1

@Dagon意味着（在您的问题的评论中），您必须处理由浏览器中的图像（使用Javascript）而不是服务器（使用PHP）选择（更改）触发的事件。

我了解您要列出列表旁边某处所选单选按钮的values？这是一个使用jQuery的简单示例，它可以帮助您入门：

function listSelectedImages() {
    var selected = $('input[type=radio]:checked'),
        selection = $.map(selected, function(e){
            return e.value;
        });
    $('#selection').text(selection.join(', '));
} 
// This will ensure that the inputs you're trying to access
// are actually loaded onto the page already
$(function(){
    $('input[type=radio]').change(listSelectedImages);
});

工作示例：http://jsfiddle.net/dXUYb/

<强>更新

为了显示图像而不是文件名列表，您可以例如做这样的事情：

function listSelectedImages() {
    $('input[type=radio]:checked')
        .prev('img')
        .clone()
        .insertAfter('#selection');
}

$('input[type=radio]').change(listSelectedImages);

我建议将图像和输入包装在<label>标签中以允许单击图像本身以及选择它。这是一个更新的示例：http://jsfiddle.net/dXUYb/5/

在php内部显示图像onclick

1 个答案: