0

HTML:

<div id="theme">
            <span>Theme:</span>
                <select onchange="getval(this);">
                    <option value="blue">Blue</option>
                    <option value="red">Red</option>
                </select>
</div>
<h1>Hello</h1>

JavaScript:

function getval(sel) {

          var x = sel.value;

          if(x = 'red')
          {
            alert('i am red');
            $('h1').css('border-bottom-color', 'red');
          }

          if(x = 'blue')
          {
            alert('i am blue');
            $('h1').css('border-bottom-color', '#1d6094');
          }
}

CSS:

h1{
    border-bottom: 5px solid #1d6094;
    margin-bottom: 10px;
    width: auto;
    line-height: 100%;
    font-family: Arial;
}

http://jsfiddle.net/Pf6Pt/

ドロップダウン メニューで色を赤から青に変更しても h1 css が変更されない理由がわかりません。おそらくケースステートメントは私の問題を解決するでしょうか?

4

2 に答える 2

3

x = 'red'に割り当て'red'ますx(青と同じこと)。(または) と比較xしたい。'red''blue'

if(x == 'red') {
    alert('i am red');
    $('h1').css('border-bottom-color', 'red');
}

if(x == 'blue') {
    alert('i am blue');
    $('h1').css('border-bottom-color', '#1d6094');
}

イベントリスナーをバインドする別の方法（フィドルで機能しました）：

var select = document.getElementById('my-select-element');
select.onchange = function() {
  setval(select);
};

jQueryを使っていることを忘れていました。これにより、すべてが非常に簡単になります。yuvi の例を見てください。

于 2013-11-02T14:54:43.060 に答える
0 
   if(x === 'red')

また

   if(x == 'red')

ではない

if(x = 'red')

注： 厳密な等価性があるため、===よりも優れています==

于 2013-11-02T14:57:26.970 に答える