如何简化此选择功能？答案

【问题标题】：How can I simplify this select function?如何简化此选择功能？
【发布时间】：2016-09-28 15:39:38
【问题描述】：

我对javascript一无所知。当我试图找到如何实现我需要的解决方案时，我刚刚在网上找到了这个 sn-p。有什么方法可以简化这一点，因为我将添加大约 40 个需要显示和隐藏的元素。

var $selects = $('.filters select');
  $selects.on('change', getValues).first().trigger("change");
  function getValues() {
    var vals = $selects.map(function() {
        return this.value;
    }).get();
    if (vals.join('') === "a1b2c3") {
        $(".box_wrapper").not(".a1b2c3").hide();
        $(".a1b2c3").show();
        $('html,body').animate({
        scrollTop: $(".a1b2c3").offset().top},
        'slow');
    }
    else if (vals.join('') === "d4e5f6") {
        $(".box_wrapper").not(".d4e5f6").hide();
        $(".d4e5f6").show();
        $('html,body').animate({
        scrollTop: $(".d4e5f6").offset().top},
        'slow');
    }
    else{
        $(".vid_box").hide();
    }
}

我认为我可以通过从选择框中获取连接值并将其用于上面的函数来进一步简化这一点，因为我对类使用相同的值组合。我只是不知道怎么做。那可能吗？提前谢谢各位！

【问题讨论】：

这段代码有效吗？
使用开关/机箱怎么样？
你能给我们看看你的html吗
哦，我错过了

标签： javascript jquery

【解决方案1】：

大概是这样的（航空代码）：

var $selects = $('.filters select');
$selects.on('change', getValues).first().trigger("change");
function getValues() {
    var vals = $selects.map(function() {
        return this.value;
    }).get();

    var values = [ "a1b2c3", "d4e5f6" ];

    var vj = vals.join('');

    if (values.indexOf(vj) !== -1) {
        $(".box_wrapper").not("." + vj).hide();
        $("." + vj)).show();
        $('html,body').animate({
            scrollTop: $("." + vj)).offset().top
        }, 'slow');
    }
    else {
        $(".vid_box").hide();
    }
}

【讨论】：

按照您的示例，我设法对其进行了简化，但是如果我使用，则在滚动顶部函数中会出现“未捕获的类型错误”：$('html,body').animate({ scrollTop: $("." + vj)).offset().top }, 'slow'); 如果我只使用普通类，我不会收到任何错误定位。
好吧，我确实说过这是航空代码。如果您将vj 记录到if 块内的控制台，您会得到什么？和普通的class值一样吗？
不太确定该怎么做。你能告诉我应该在浏览器控制台上输入的确切命令吗？对不起。
没问题。在$(".box_wrapper") 行之前，添加以下行：console.log(vj);。然后运行代码，并检查浏览器的控制台以查看输出内容。
谢谢！我想我想通了。它返回错误，因为我还没有元素与脚本滚动到的值一起使用。

【解决方案2】：

我会建议这样的东西。

var $selects = $('.filters select');

$selects.on('change', function() {

    var value = $selects.map(function() {
        return this.value;
    }).get();

    $(".box_wrapper").not("." + value).hide();
    $(".box_wrapper." + value).show();
    $('html, body').animate({
    scrollTop: $("." + value).offset().top},
    'slow');
});

$selects.first().trigger("change");

【讨论】：

【解决方案3】：

这是我的最终代码。感谢@MJH 的所有帮助。

  var $selects = $('.filters select');
  $selects.on('change', getValues).first().trigger("change");
  function getValues() {
  var $selects = $('.filters select');
  $selects.on('change', getValues).first().trigger("change");
  function getValues() {
    var vals = $selects.map(function() {
        return this.value;
    }).get();
    var vwarp = vals.join('');
    if (vwarp == vwarp) {
        $(".box_wrapper").not("." + vwarp).hide();
        $("." + vwarp).show();
        $('html,body').animate({
        scrollTop: $("." + vwarp).offset().top},
        'slow');
    }
    else{
        $(".box_wrapper").hide();
    }
}

希望这会有所帮助！

【讨论】：