javascript - 使用列表中子元素值的 attr 更改 div 类的 css

Question

我正在设计排名栏，我有 9 个栏，但我希望栏的高度有所不同，以便第 0 栏和第 8 栏最长。我似乎可以操纵我的 jquery 选择器来使用选择选项的值更改栏的 css 样式。下面是我的代码。

CSS:

 .rating-c .br-widget {
height: 60px;
display: inline;    
}

.rating-c .br-widget a {
display: inline;    
width: 20px;
height: 60px;
float: left;
background-color: #FFFFFF;
margin: 2px;
text-decoration: none;
font-size: 16px;
font-weight: 400;
line-height: 2.2;
text-align: center;
color: #444444;
border: thin solid #b6b6b6;
}
.rating-c .br-widget a.br-active,
.rating-c .br-widget a.br-selected {
background-color: #59a6d6;
color: white;
}

html:

        <div class="rating-c">
             <label class="ratingLabel">
                 <select id="rating-c" name="rating">
                      <option value=""></option>
                      <option value="1">4</option>
                      <option value="2">3</option>
                      <option value="3">2</option>
                      <option value="4">1</option>
                      <option value="5">0</option>                            
                      <option value="6">1</option>
                      <option value="7">2</option>
                      <option value="8">3</option>
                      <option value="9">4</option>
                    </select>
                 Price</label>    
            </div>

JavaScript:

$('.rating-c .br-widget a select[name=rating]').each(function(){
            if($(this).attr("value")==="2"){
                $(".rating-c").css("height", "55px");
            }
            if($(this).attr("value")==="3"){
                $(".rating-c .br-widget a").css("height", "50px");
            }
        });

这似乎行不通，谁能帮忙。谢谢。请帮忙

Answer 1

使用@SterlingArcher 所说的，让我们使用this.value 和parseInt...

if (parseInt(this.value) === 2) {
    $("something").css("key", "value");
};

首先，parseInt 将值转换为数字，这使您的特定比较更有意义。

其次，我们使用 this.value，它使用 value 属性，而不是 attribute。这也可以在 jQuery buy 中完成，执行 $(this).val() 检索属性，而不是您之前执行的值属性。