javascript - 选择值的变化

Question

我有一个包含两个图像的 slider 。我将它们分为两类:item active 和 item。我还有一个下拉选择框，我可以在其中选择颜色。根据选择，我想显示所选的颜色。

第一类:

<div class="item">
    <div class="product-image image">
        <img src="http://www.aaa.aa/image1" alt="">
    </div>
</div>

第二类:

<div class="item active">
    <div class="product-image image">
        <img src="http://aaaa.aa/mage2" alt="">
    </div>
</div>

下拉菜单

<div class="input-select input-select--alternate">
    <select data-choosetxt="Colour" name="super_attribute[124]" id="attribute124" class="validate-select super-attribute-select validation-passed" data-role="none">
        <option value="">Selection1</option>
        <option value="473" price="0">Selection2</option>
        <option value="475" price="0">Selection3</option>
    </select>
</div>

Answer 1

我个人会以不同的方式重构您的 html。但这里有一个简单的例子，用 JS 和 JQUERY 改变一些东西。链接到 JS FIddle:

https://jsfiddle.net/f8kzmm0t/

HTML:

<div class="item">
    <div class="product-image image">
        <img src="http://www.aaa.aa/image1" alt="">
    </div>
</div>

<div class="item active">
    <div class="product-image image">
        <img src="http://aaaa.aa/mage2" alt="">
    </div>
</div>

<div class="input-select input-select--alternate">
    <select data-choosetxt="Colour" name="super_attribute[124]" id="attribute124" class="validate-select super-attribute-select validation-passed" data-role="none">
        <option value="">Selection1</option>
        <option value="473" price="0">Selection2</option>
        <option value="475" price="0">Selection3</option>
    </select>
</div>

JS:

$( "#attribute124" ).change(function() {
    var curr = $( "#attribute124" ).val();

    if(curr == ''){
        alert('do something');
    }else if(curr == '473'){
        alert('change color here');
    }else if(curr == 475){
        alert('change color here');
    }
});

CSS:

.item{
    display:block;
    width: 100%;
    height:50px;
    background-color:red;
}
.item.active{
    display:block;
    width: 100%;
    height:50px;
    background-color:blue;
}

调整以上内容以获得您想要的结果。