背景更改在JavaScript中不起作用.怎么了

Question

我正在使用jQuery滑块，我有一个布局和一个中心div。这就是我使用ASP.NET MVC3所做的。

html：

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

JavaScript： 函数color_change（）{ var IDS = new Array（）; IDS [0] ='1'; IDS [1] ='2'; IDS [2] ='3';

            for (var item = 0; item < ids.length; item++) {
                var x = document.getElementById(ids[item]);
            }
        if (x.id == '1' && x.title=='iphone') {
            $(".st_tabs_container").css({ "background-color": "#c8c7c7" });
            }
            else
                if (x.id == '2' && x.title == 'salah') {
                    $(".st_tabs_container").css({ "background-color": "yellow" });
                }
                else
                    if (x.id == '3' && x.title == 'tasbeeh') {
                        $(".st_tabs_container").css({ "background-color": "#c8c7c7" });
                    }
                }
      $(document).ready(function () {
    color_change();
    });

我已经使用了此JavaScript来更改背景，但它不起作用，任何帮助都会被附上。

Answer 1

我认为问题是您正在使用ID数字。尝试使用字母启动您的ID值。我认为您应该考虑使用ID之前，即ID1，ID2或类似的内容。

您正在为时过早关闭For循环，还要嵌套所有逻辑。

Answer 2

不是x总是将是3，因为您要在循环中重置X。

Answer 3

您在所有元素上都循环无需对它们做任何事情，因此根据您的尝试，您可能还需要将IF-Statement移至For-loop中，或以适当的方式从循环内部使用x。

不完全确定您想完成的工作，但是我已经整理了我想做的事情：http：//jsfiddle.net/zuztu/1/

function color_change() { 
    var ids = new Array(); ids[0] = '1'; ids[1] = '2'; ids[2] = '3';
    for (var item = 0; item < ids.length; item++) {
        var x = document.getElementById(ids[item]);
        if (x.id == '1' && x.title=='iphone') {
            $("#" + x.id).css({ "background-color": "#c8c7c7" });
        }
        else if (x.id == '2' && x.title == 'salah') {
            $("#" + x.id).css({ "background-color": "yellow" });
        }
        else if (x.id == '3' && x.title == 'tasbeeh') {
            $("#" + x.id).css({ "background-color": "#c8c7c7" });
        }
    }
}        
$(document).ready(function () {
    color_change();
});​

Answer 4

可以肯定的是，您不是正确调用ID，请尝试以下操作：

<div class="animateriphone" id="id2" title="salah">  
var x = document.getElementById('id'+ ids[item]);