javascript - 选择菜单不改变.css

Question

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 没有改变。也许案例陈述可以解决我的问题？

Answer 1

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');
}

绑定(bind)事件监听器的另一种方法(在 fiddle 中工作):

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

我忘了你正在使用 jQuery。这让一切变得简单多了。看yuvi's example .