Question

我想制作一些这样的东西，你可以选择前面和背景，并根据你选择的内容一起显示：https://www.control4.com/solutions/products/switches

注意：两个图像都将从下拉列表中选择，并应在选择后一起显示。我已经设法让一点工作，但我正在努力改变背景并显示前景。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>                 
<div>
    <h3>Buttons</h3>
    <select id="switchSel">
      <option value="black">Black</option>
      <option value="brown">Brown</option>
      <option value="white">White</option>
      <option value="aluminum">Aluminum</option>
      <option value="biscuit">Biscuit</option>
      <option value="snowwhite">Snow White</option>
      <option value="midnightblack">Midnight Black</option>
      <option value="lightalmond">Light Almond</option>
    </select>
</div>
<div class="switch black">
    <div class="back">
        <!-- <select id="faceplate">
          <option value="backblack" class="backblack">Black</option>
          <option value="backbrown">Brown</option>
          <option value="backwhite">white</option>
          <option value="backbiscuit">Biscuit</option>
          <option value="backblack">Black</option>
          <option value="backblack">Black</option>
       </select>-->
    </div>
</div>

.back {
    background: url(switch/faceplate/white.png);
    height: 575px;
    width: 361px;
    display: inline-block;
    background-size: contain;
}
.backblack {
    -webkit-filter: saturate(110);
    filter: saturate(0);
}
.brown {
    background: url(switch/button/brown.png);
    height: 575px;
    width: 361px;
}
.black {
    background: url(switch/button/black.png);
    height: 575px;
    width: 361px;
}
.white {background: url(switch/button/white.png);
    height: 575px;
    width: 361px;
}
.aluminum {background: url(switch/button/aluminum.png);
    height: 575px;
    width: 361px;
}
.snowwhite {background: url(switch/button/snowwhite.png);
    height: 575px;
    width: 361px;
}
.lightalmond {background: url(switch/button/lightalmond.png);
    height: 575px;
    width: 361px;
}
.midnightblack {background: url(switch/button/midnightblack.png);
    height: 575px;
    width: 361px;
}
.biscuit {background: url(switch/button/biscuit.png);
    height: 575px;
    width: 361px;
}

Answer 1

要在选择框更改时更改元素上的类，可以使用此简单的jQuery位来更改类名。这种方法的唯一问题是你每次都必须删除旧的类名，或以某种方式重置它。

要避免此问题，您可以将颜色值存储在属性中，然后使用属性选择器将其定位。这样，您可以轻松更新值。

var front = $('.front');
var back = $('.back');

$('#front').on('change', function(e){
  front.attr('data-colour', $(this).val());
});

$('#back').on('change', function(e){
  back.attr('data-colour', $(this).val());
});

当您更改选择值时，这将更改数据属性值。然后你可以用这样的东西来设置每个样式：

[data-colour="brown"]{
    background: brown url('switch/button/brown.png');
}

这是一个可以进一步解释这个概念的编码器。

http://codepen.io/SudoCat/pen/yVjjLx?editors=1111

选定的图像从两个不同的下拉菜单一起更改和显示

1 个答案: