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

绑定事件侦听器的另一种方法（在小提琴中起作用）：

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

我忘了你正在使用 jQuery。这让一切变得简单多了。看看yuvi 的例子。

Answer 2

   if(x === 'red')

或者

   if(x == 'red')

并不是

if(x = 'red')

注意： ===优于==因为它是严格等价的