Question

我创建了一个带有各种if语句的函数，如果参数为true，将执行该函数。但是将false作为参数传递似乎不起作用。我做错了什么？

function easySlider(titleP, subTitleP, overlayP) {
  var title = titleP;
  var subTitle = subTitleP;
  var overlay = overlayP;

  if (title === true) {
    $(".sliderTitle").css("display", "block");
  } else {
    $(".sliderTitle").css("display", "none");
  }

  if (subTitle === true) {
    $(".sliderSubTitle").css("display", "block");
  } else {
    $(".sliderSubTitle").css("display", "none");
  }

  if (overlay === true) {
    $(".sliderOverlay").css("display", "block");
  } else {
    $(".sliderOverlay").css("display", "none");
  }
}

easySlider(true, false, true);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h2 class="sliderTitle">Hello sliderTitle</h2>
<h3 class="sliderSubTitle">Hello sliderSubtTitle</h3>
<div class="sliderOverlay">Hello sliderOverlay</div>

Answer 1

你可以试试这个

<div class="sliderTitle"></div>
<div class="sliderSubTitle"></div>
<div class="sliderOverlay"></div>

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
    function easySlider(title, subTitle , overlay) {
        var titleDisplay     = title ? 'block' : 'none';
        var subTitleDisplay  = subTitle ? 'block' : 'none';
        var overlayDisplay   = overlay ? 'block' : 'none';

        $(".sliderTitle").css("display", titleDisplay);
        $(".sliderSubTitle").css("display", subTitleDisplay);
        $(".sliderOverlay").css("display", overlayDisplay);
    }

    easySlider(false, false, false);
</script>

Answer 2

 <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>

    <p class="sliderTitle">
    Slider Title
    </p>
    <p class="sliderSubTitle">
    Slider Subtitle
    </p>
    <p class="sliderOverlay">
    Slider Overlay
    </p>

<script>
function easySlider(titleP,subTitleP,overlayP){

    var title = titleP;
    var subTitle = subTitleP;
    var overlay = overlayP;

    if(title===true) {
     $(".sliderTitle").css("display","block");
    }else{
     $(".sliderTitle").css("display","none");
    }
    if(subTitle===true) {
     $(".sliderSubTitle").css("display","block");
    }else{
     $(".sliderSubTitle").css("display","none");
    }
    if(overlay===true) {
     $(".sliderOverlay").css("display","block");
    }else{
     $(".sliderOverlay").css("display","none");
    }
}   


easySlider(true,false,false);

https://jsfiddle.net/me2b0r56/

似乎工作得很好......

Answer 3

如果这是您的代码（并且您希望在页面加载时隐藏所有内容），则必须等待文档准备好才能调用该函数：

function easySlider(titleP,subTitleP,overlayP){
    var title = titleP;
    var subTitle = subTitleP;
    var overlay = overlayP;

    if(title===true) {
        $(".sliderTitle").css("display","block");
    }else{
        $(".sliderTitle").css("display","none");
    }

    if(subTitle===true) {
        $(".sliderSubTitle").css("display","block");
    }else{
        $(".sliderSubTitle").css("display","none");
    }

    if(overlay===true) {
        $(".sliderOverlay").css("display","block");
    }else{
        $(".sliderOverlay").css("display","none");
    }   
}

$(document).ready(function(){
easySlider(false,false,false);
});

否则，如果在加载文档后调用该函数，则可以正常工作。

Javascript布尔参数未正确传递

3 个答案: