Question

我的页面中充满了以_off.jpg结尾的图像。我有一个onclick事件，当单击图像时，它会将图像更改为图像的_on.jpg版本（灰显的图像）。那部分工作正常。我还希望它调用update.php页面，我将使用为该图像单击传入的变量更新数据库。

问题是我无法获取单击的图像的变量以传递到update.php页面。

这里是用于交换每个图像的jquery函数和对update.php的ajax调用

    jQuery(function(){
             $(".img-swap").live('click', function() {
                if ($(this).attr("class") == "img-swap") {
                this.src = this.src.replace("_off","_on")
                    $.ajax({
                    type: "get",
                    url: "updatelist.php"
                    });
            } else {
                this.src = this.src.replace("_on","_off");
                }
                $(this).toggleClass("on");
            });
    });

这是从目录

调用图像的部分

            $files = glob("movieposters/*_off.*");
             for ($i=0; $i<count($files); $i++) 
             { $num = $files[$i]; 
             echo '<img src="'.$num.'" border="3" style="border-color:#ffffff" class="img-swap">';

Answer 1

以下是AJAX请求的快速示例：

$.ajax({
   type: "GET",
   url: "file.php",
   data: "foo=three&bar=asdfg",
   success: function(data) {
     alert('Response was: ' + data);
   }
 });

设置要发送的变量的部分就在这里"foo=three&bar=asdfg"，所以如果你想发送图像的src=，这种请求可能会有效：

$.ajax({
   type: "GET",
   url: "file.php",
   data: "name=" + encode($(this).attr('src')),
   success: function(data) {
     alert('Response was: ' + data);
   }
 });

请注意，我使用了encode()。您需要对您的请求进行编码。

Answer 2

我认为这会做你想要的......

显示图片

<?php
    //  Load list
    $_fileList = glob( "movieposters/*_off.*" );

    foreach ( $_fileList as $_file )
        echo '<img src="' . $_file . '" border="3" style="border-color:#ffffff" class="img-swap">';
?>

交换他们......

<script>
$(function(){
    $('.img-swap').live('click', function() {
        var _src = $(this).attr('src');
        if (-1 == _src.indexOf('_on')) {
            $(this).attr('src',_src.replace('_on','_off')).removeClass('on');
        } else {
            $(this).attr('src',_src.replace('_off','_on')).addClass('on');
        }

        //  Update server
        $.get( 'updatelist.php?image='+escape(_src));
    });
});
</script>

然后你的服务器脚本（updatelist.php）：

<?php
    $_clickedFile = $_GET['image'];
    ...
?>

如何通过onclick事件获取并传递变量来更新db

2 个答案: