在jquery的错误背景图象道路

时间:2013-10-28 11:19:16

标签: jquery

我需要根据mvc 3中ddl的选定索引值显示标签的背景图像。 如果所选文本为“A”,则将背景图像设置为无,否则,将背景图像设置为图像。 BUt第一部分(make none)对我有用,再次如果我选择其他值而不重置图像。总是显示背景null.Its为图像采取了错误的路径。

我的代码如下

$('#ddl').change(function () {
    if ($("#ddl option:selected").text() == 'Emergency Contact') {
        $('.width label#contact').css("background", "none");
    } else {
        $(".width label#contact").css('background-image', 'url("/Content/images/help.jpg")');
    }
});

else部分始终采用错误的图像路径。我的图像位于以下文件夹中     d:\项目名称\ UI \内容\ IMAGES

2 个答案:

答案 0 :(得分:0)

您的js代码似乎没问题:或许路径$(“。width label #contact”)在html中出错了?你能展示自己的HTML代码吗?

这是一个让我发挥作用的例子:

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Untitled</title>
    <link rel="author" href="humans.txt">
</head>
<body>
    <div class="width"><label for="" id="contact" style="width:400px;height:400px;display:block;">helloworld</label></div>
    <p></p>
    <p></p>
    <p></p>
    <select name="" id="ddl">
        <option value="">other 1</option>
        <option value="">Emergency Contact</option>
        <option value="">other 2</option>

    </select>
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <script>
    $().ready(function () {
        $('#ddl').change(function () {
            if ($("#ddl option:selected").text() == 'Emergency Contact') {
                $('.width label#contact').css("background", "none");
            }
            else {
                $(".width label#contact").css('background-image', 'url("https://www.google.fr/images/srpr/logo11w.png")');
                 }
        });
    })

    </script>
</body>

答案 1 :(得分:0)

这看起来像是一个相对路径问题。试试这种方法:

$(".width label#contact").css('background-image', 'url("Content/images/help.jpg")');

还要考虑使用这种替代方法:

CSS:

#contact.help {
  background-image:url("Content/images/help.jpg");
}

jQuery的:

$(".width label#contact").toggleClass('help');