javascript - 根据选择的选择显示 3 个 div 之一

Question

<分区>

Answer 1

尝试

//dom ready handler
jQuery(function () {
    //all the elements that has to be shown/hidden, it is cached for easy access later
    var $targets = $('.body, .strength, .distance');

    //chang handler for the select element
    $('.typeselect').change(function () {
        //hide previously displayed elements
        $targets.hide()

        //find the element with the selected option's value as class, if empty option is selected set it to an empty set
        if (this.value) {
            $('.' + this.value).show()
        }
    })
})

演示:Fiddle

如果你想让按钮处理程序工作，那么

//dom ready handler
jQuery(function () {
    //all the elements that has to be shown/hidden, it is cached for easy access later
    var $targets = $('.body, .strength, .distance');

    var $select = $('.typeselect');

    //click handler for the button
    $('.toggle').click(function (e) {
        //prevent the default form action of the button click
        e.preventDefault();

        //hide previously displayed elements
        $targets.hide()

        //selected value
        var val = $select.val();
        //find the element with the selected option's value as class, if empty option is selected set it to an empty set
        if (val) {
            $('.' + val).show()
        }
    })
})

演示:Fiddle