通过点击图片改变CSS属性的背景颜色答案

【问题标题】：Change the background color of an attribute of CSS by the click of an image通过点击图片改变CSS属性的背景颜色
【发布时间】：2013-02-10 16:10:03
【问题描述】：

我希望在用户单击图像颜色时让我的内容属性的背景颜色淡化为另一种颜色。

我认为我的做法完全错误，如果能提供任何帮助，我将不胜感激。

我希望我正确地发布了这个。如果没有，请道歉。我做浏览器很久了，现在才决定注册。

http://jsfiddle.net/WhiteSlevin7/LAcFa/9/

<body>
<div id ="wrapper">
    <section id ="logo">
    </section>
    <section id ="header">
    </section>

    <div id="accessibility">
    <ul>
        <li><a data-color-id="1" href="#"><img src="images/red-color.jpg"></a></li>
        <li><a data-color-id="2" href="#"><img src="images/blue-color.jpg"></a></li>
        <li><a data-color-id="3" href="#"><img src="images/grey-color.jpg"></a></li>
        <li><a data-color-id="4" href="#"><img src="images/purple-color.jpg"></a></li>
    </ul>
    </div> 
    <section id="content">
        <article>
        </article>
    </section>  
    </div>

a{
    color: #ffffff;
    text-decoration: none;
    font-size: 85%;
    border: 0;
}
a:hover{
    color: #000000;
    font-size: 85%;
}
#header{
    height: 170px;
    background: url(images/banner.jpg) no-repeat center ;
    padding: 0px; 
}
#logo{
    height: 109px;
    background: #9bbdc7 url(images/logo.jpg) no-repeat center;
    border-style: none;
    padding: 0px;
}
#accessibility li {
    float: left;
    padding: 0 20px 0 0;
    list-style: none;
}
#accessibility li a {
    color: #CFCFCF;
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
    transition: all 0.2s linear;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
}

#wrapper {
    width: 960px;
    margin: 10px auto;
    text-align:left;
    min-width: auto;
}
#content {
    width: 100%; 
    background: #eff6f4;
    float: left;
    transition: background 4s linear;
    -webkit-transition: background 4s linear;
    -moz-transition: background 4s linear;
}
article{
    background: #f9f6f6;
    border: 1px solid black;
    padding: 20px;
    margin-bottom:10px;
    margin-top:10px;
}

function changeBg(currentItem) {
    var bg = 'null';
    currentItem = Number(currentItem)
    switch (+currentItem) {
        case 1 :
            bg = '#9CC8BC';
            break;
        case 2 :
            bg = '#9CA7C8';
            break;
        case 3 :
            bg = '#C8BC9C';
            break;
        case 4 :
            bg = '#C89CBD';
            break;
        default :
            bg = '#eff6f4';
    }
    $('#content').css('background', bg);
}

jQuery('#accessibility li a').bind('click', function() {
    changeBg(this.id);
    return false;
});

【问题讨论】：

$('layout') 应该选择什么？
您的Html 部分中没有layout 这样的东西。 $('layout').css('background', bg); 不会选择任何内容

标签： javascript jquery css switch-statement

【解决方案1】：

问题： (1) 将事件处理程序包裹在ready() 中。 (2) 设置样式为有效元素#content。

工作代码：Live Demo

HTML

<div id ="wrapper">
    <section id ="logo"></section>
    <section id ="header"></section>

    <div id="accessibility">
    <ul>
        <li><a id="1" href="#"><img src="images/red-color.jpg"></a></li>
        <li><a id="2" href="#"><img src="images/blue-color.jpg"></a></li>
        <li><a id="3" href="#"><img src="images/grey-color.jpg"></a></li>
        <li><a id="4" href="#"><img src="images/purple-color.jpg"></a></li>
    </ul>
    </div> 

    <section id="content">
        <article>
        </article>
    </section>  
</div>

脚本

function changeBg(currentItem) {
    var bg = 'null';
    switch (+currentItem) {
        case 1 :
            bg = '#9CC8BC';
            break;
        case 2 :
            bg = '#9CA7C8';
            break;
        case 3 :
            bg = '#C8BC9C';
            break;
        case 4 :
            bg = '#C89CBD';
            break;
        default :
            bg = '#eff6f4';
    }
    $('#content').css('background', bg);
}

jQuery(document).ready(function() {
    jQuery('#accessibility li a').on('click', function() {
        changeBg(this.id);
        return false;
    });
});

【讨论】：

完美运行。非常感谢。

【解决方案2】：

我认为您的意思是使用 $('#content') 而不是 $('layout')。

$('#content').css('background', bg);

您可能希望使用 data-* 属性（例如 data-color-id）作为颜色的 id。

<a data-color-id="1" href="#"><img src="images/red-color.jpg"></a>

另外，您的小提琴缺少 jQuery，HTML 内容最好只包含 <body> 的内容。

See it here.

【讨论】：