Question

我对javascript和php不是很了解，而且我明白要做这项工作我需要使用js和php。

我想创建一个＆＃34;选择框＆＃34;有4个不同的图像。将有一个默认图像，但在此选择框中，用户应该能够根据需要选择其他3个背景中的一个。

我不确定为什么它不起作用，所以我会在下面向您展示我的文件：

这是webclient.html：

<div class="dropdown" id="dropdown">
                <input type="checkbox" id="drop1" />
        <label for="drop1" class="dropdown_button">Background <span class="arrow"></span></label>
        <ul class="dropdown_content">
            <li><a href="#" onclick="changeImage(1);">Navy Aero</a></li>
            <li><a href="#" onclick="changeImage(2);"><img src="img/b_webclient_2.png" /></a></li>
            <li><a href="#" onclick="changeImage(3);">Gray Bullet</li>                                
            <li><a href="#" onclick="changeImage(4);">Dark Pheonix</li>
        </ul>
        <!-- note that the <img src> was just to test if it would work if I placed image in. -->
    </div>

我还包括脚本：

<script type="text/javascript" src="core/jquery.js"></script>
<script type="text/javascript" src="core/changebg.js"></script>

changebg.js：

function changeImage(number)
{
    $.post('core/changebg.php',{number:number},
        function(data)
        {
            $('body').css('background-image', 'url("img/'+number+'.png")');
        });
}

changebg.php：

<?php

    if (isset($_POST['number'])) 
    {
        session_start();
        $_SESSION['image'] = $_POST['number'];
    }

?>

最终产品是这样的： http://imgur.com/HXzpGhj

当我点击其中任何一个时，没有任何事情发生。

Answer 1

您可以使用纯粹的jQuery，例如以下内容，只需将backgroundColor替换为backgroundImage，将选择的值替换为图像的路径，或者图像的数量和使用像'img/'+bg+'.png'

这样的id路径中的bg变量

$('#bgs').on('change', function() {
    var bg = $(this).find(':selected').val(),
        body = $('body');
    body.css('backgroundColor', bg);
});

在网站的选择框中选择背景

1 个答案:

JSFiddle Color Example

JSFiddle Image Example

JSFiddle Effect Transition Example