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's example。

Answer 2

   if(x === 'red')

或

   if(x == 'red')

而不是

if(x = 'red')

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

选择菜单不改变.css

2 个答案: