Question

我有一个选项，它应该通过将我的HTML（// "duplicates" in both xs and ys will now be removed unionByAll (f) ([], xs, ys)）中的ID名称与用户选择的值相匹配来更改div内容。

我唯一的问题是我不知道如何使用普通的javascript检查div id的选项值。最后一部分monthchosen是不正确的，但希望能够实现我想要完成的任务。我在div id下面的内容以选项months[i].id.includes(monthchosen)命名，我希望在名称对应时显示。

我的例子使用了React，虽然纯JS中的解决方案可能就足够了。

我的JavaScript：

(ie: <div id="oct2016">)

我的HTML

updatedate:function(){
    var months = document.getElementsByClassName('month');
    var monthchosen = this.refs.datechosen;
    for (var i = 0; i < months.length; i++){
        months[i].style.display = 'none';
        months[i].id.includes(monthchosen).style.display = 'block';
    }
}

Answer 1

我不得不在w3schools中搜索各种简单但离合器的JavaScript语法。我请你原谅我，因为我先学习了jQuery，所以我不知道所有的香草等价物。 JavaScript具有默认方法来查询0 1 2 3 0 Q - - - 1 - - - - 2 - - Q - 3 - Q - Q元素中选择的内容。此外，下面的StackOverflow帖子让我感觉像95％的那样：How to select all children of an element with javascript and change CSS property?

当调用函数时，我们会立即捕获变量中的value属性。然后，我们再次循环并使用JavaScript三元方法快速比较应隐藏的内容和应显示的内容。

<强> HTML：

<selection>

<强> JavaScript的：

<select ref="datechosen" id="datechosen" onChange=updatedate()>
    <option value="dec2016">December 2016</option>
    <option value="nov2016">November 2016</option>
    <option value="oct2016">October 2016</option>
</select>
<div id='dec2016' class='month'>
    DEC
</div>
<div id='oct2016' class='month'>
    OCT
</div>
<div id='nov2016' class='month'>
    NOV
</div>

＆＃13;

<script>
    function updatedate() {
        var months = document.getElementsByClassName('month');
        var whichIsSelected = '';

        var nodes = document.getElementById('datechosen').childNodes;
        for (var i = 0; i < nodes.length; i++) {
            if (nodes[i].selected) {
                whichIsSelected = nodes[i].value;
            }
        }
        for (var x = 0; x < months.length; x++) {
            months[x].style.display = (months[x].id === whichIsSelected) ? 'block' : 'none';
        }

        console.log(whichIsSelected);
    }

</script>

＆＃13;

    function updatedate() {
        var months = document.getElementsByClassName('month');
        var whichIsSelected = '';
        //var monthchosen = this.attr.ref;

        var nodes = document.getElementById('datechosen').childNodes;
        for (var i = 0; i < nodes.length; i++) {
            if (nodes[i].selected) {
                //whichIsSelected.push(nodes[i].value);
                whichIsSelected = nodes[i].value;
            }
        }
        for (var x = 0; x < months.length; x++) {
            months[x].style.display = (months[x].id === whichIsSelected) ? 'block' : 'none';
        }


        console.log(whichIsSelected);
    }

＆＃13;

Javascript按名称选择ID

1 个答案: