Question

我有一个选项列表：

<select id="numOfcards">
    <option value="Select">Select</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>

我也有翻转容器，默认设置为33％宽度：

.flip-container {
    perspective: 1000px;
    display: inline-block;
    width: 33%;
    min-width: 400px;
    padding-right: 2px;
}

我最终想要的是：

选择选项1时，宽度为100％。选择选项2时，宽度为48％。选择选项3时，宽度为33％。选择选项4时，宽度为24％。选择选项5时，宽度为19％。

我不需要完整的代码，只是为了知道（A）这是否可能没有后端语言，以及（B）背后的主要概念。我查看了谷歌和stackoverflow，似乎无法找到这些确切规格的问题。最好，我希望答案为JS。

感谢。

Answer 1

好问题。使用pure-CSS没有实用的方法，但使用JavaScript可以很容易地完成。每个选项都应包含目标宽度的数据：即
<option value="1" data-width="100%">1</option>

然后在页面末尾添加<script>。通常脚本存储在单独的.js文件中，因此您添加<script src="main.js"></script>。 <script> src就像<img> src一样，但如果您不想将它们存储在单独的文件中，也可以执行内联脚本。

main.js看起来像

var select = document.getElementById('numOfcards')
var containers = document.querySelectorAll('.flip-container')
select.onchange = function () {
  var selectedOption = this.options[this.selectedIndex]
  for(var i = 0; i < containers.length; i++)
    containers[i].style.width = selectedOption.getAttribute('data-width')
}

Answer 2

是的，在JavaScript中，向监视select事件的change元素添加事件侦听器。

每当触发更改事件时，获取值并使用.flip-container遍历所有querySelectorAll元素。根据select元素的值更新每个.style.width属性。

Answer 3

以下是我如何用一点jQuery做的事情：

$('select').on('change', function() {
    var selValue = parseInt(this.value, 10);
    switch (selValue) {
        case 1:
            $('.thing').css('width', '100%');
            break;
        case 2:
            $('.thing').css('width', '48%');
            break;
        case 3:
            $('.thing').css('width', '33%');
            break;
        case 4:
            $('.thing').css('width', '24%');
            break;
        case 5:
            $('.thing').css('width', '19%');
            break;
    }
});

演示： https://jsfiddle.net/ksr2p48j/

使用选择标记修改CSS

3 个答案: