javascript - 如何使用 jquery 滑块更改背景？

Question

我正在使用 jquery 滑块，我有一个布局和一个中心 div 内容..当我在不同的页面上滑动时，我需要更改布局的颜色。这就是我使用 asp.net mvc3 所做的。

HTML：

<div id="iPhone_Product">
        <div class="slides_containeriphone" >
            @if (Model == null)
            {
                <div class="animateriphone" id="1">
                    @Html.Partial("_iPhone_Main")
                </div>
                    <div class="animateriphone" id="2">
                    @Html.Partial("Salah")
                </div>
                    <div class="animateriphone" id="3">
                    @Html.Partial("_Tasbeeh")
                </div>
            }
            else
            { 
                foreach (string s in Model)
                {
                    <div class="animateriphone">
                        @Html.Partial(s);
                    </div>
                }
            }

        </div>
    </div>

javascript:

function color_change() {

        var x = document.getElementById('2');

        if (x.id == '2') {
            $(".st_tabs_container").css({ "background-color": "#ffe21f" })
        }
        else
        {
            $(".st_tabs_container").css({ "background-color": "#c8c7c7" })
        }
    }

它将背景更改为#ffe21f，但 else 语句不起作用。任何帮助都会得到帮助。

Answer 1

您只需创建对象

var x = document.getElementById('2');

所以x.id总是有值2。这样您的 if 条件将始终返回true

尝试简单的javascript

       var color = document.getElementById('some').style.backgroundColor;

变量颜色有值。如果您当前的背景是红色，则color = rgb(255, 0, 0)"; 然后检查颜色变量以更改背景

例如：

if(color == "rgb(255, 0, 0)")
  {
      document.getElementById('some').style.backgroundColor = "#FFFF00";
  }
  else 
  {
      document.getElementById('some').style.backgroundColor = "#FF0000";
  }  

Answer 2

这应该有效：

idArray = ['1', '2', '3'];

        for (var item = 0; item < idArray.length; item++) 
        {

            var x = document.getElementById(idArray[item]);
        }

        if
                (x.id == '2') {
            $(".st_tabs_container").css({ "background-color": "#ffe21f" })
        }
        else
        {
            $(".st_tabs_container").css({ "background-color": "#c8c7c7" })
        }