Question

假设我有图像和文本字段。每当我在文本字段中输入特定单词时...我希望图像动态地和ajax-acally更改（不重新加载网页）到我设置的图像...

这是怎么做到的？也许使用PHP / jQuery？

Answer 1

这与PHP等服务器端语言无关。

使用jQuery：

$(function() {
   $('#textfield').change(function () {
     switch($(this).val()) {
       case 'some text':
         $('#image').attr('src', 'some image source');
         break;
       case 'some other text':
         $('#image').attr('src', 'some other source');
         break;
     }
   });
});

或者，您可以维护text =＆gt;的哈希值。 image-src对。您可以简单地查看用户输入的文本是否在散列中具有匹配的图像src，而不是switch语句。

Answer 2

这是启动你的部分解决方案：

// bind to the keyup event of a text input
$("#textinput").keyup(function() {

    // when the event is triggered, send the captured text to the server
    // as the 'whichImage' param
    $.getJSON('image.php', { whichImage: $(this).val()}, function(json) {

        if(!json.error) {
            // modify the src (and whatever other attributes) to
            // whatever the response contains
            // another approach would be to send back an entire image tag and insert it
            // somewhere in the document
            $("#theImage").attr('src', json.src);
            $("#theImage").attr('width', json.width);
        } else {
            alert(json.error);
        } 
    });
});

PHP：

<?php
if(isset($_GET['whichImage']) && !empty($_GET['whichImage'])) {

    // supposing that function returns array('src' => 'foo.jpg', 'width' => '250px') etc..
    $imgArray = getMatchingImage($_GET['whichImage']);
    if(!empty($imgArray)) {
        echo json_encode($imgArray);
    } else {
        echo json_encode(array('error' => 'no match!'));
    }
    exit;
} 
?>

添加延迟以将捕获的文本发送到服务器是个好主意，因此在用户键入时请求不会一直触发。希望这很有用！

寻找特定的词 - 然后改变图像

2 个答案: