0

mvc 3 で選択した ddl のインデックス値に基づいて、ラベルの背景画像を表示する必要があります。しかし、最初の部分（何も作成しない）は私にとってはうまくいきます。他の値を選択すると、画像がリセットされず、常に背景がnullに表示されます。常に画像の間違ったパスを取ります。

私のコードは次のとおりです

$('#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:\projectname\UI\Content\Images にあります。

4

2 に答える 2

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>

于 2013-10-28T11:28:28.457 に答える
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');
于 2013-10-28T11:28:50.803 に答える