Question

我对javascript一无所知。当我试图找到如何实现我需要的解决方案时，我刚刚在网上找到了这个片段。有没有办法简化这个，因为我将添加大约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();
    }
}

我想我可以通过从选择框中获取连接值并在上面的函数中使用它来进一步简化这一点，因为我对类使用相同的值组合。我只是不知道如何。那可能吗？先谢谢你们！

Answer 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();
    }
}

Answer 2

我会建议这样的事情。

foo()

Answer 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();
    }
}

希望这有帮助！

如何简化此选择功能？

3 个答案: