2016-08-03 137 views
1

我用各种if语句创建了一个函数,如果参数为true,将会执行该函数。但是将false作为参数传递似乎不起作用。我究竟做错了什么?Javascript布尔参数传递不正确

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>

+2

除了没有缓存DOM访问和不需要的作业,没有什么不对的代码,我可以看到。也好奇你为什么不使用'.hide'和'.show' ... –

+0

你在if语句中用double等于(==)吗? – therealbischero

+2

_But传递false作为参数似乎并不工作_什么不行?请描述问题 –

回答

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> 
0
<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/

似乎是工作的罚款...

+1

这是因为在运行javascript之前,默认情况下jsfiddle会等待文档就绪状态。只需编辑设置,使其立即在head标签中运行,并且不再工作:https://jsfiddle.net/me2b0r56/1/ –

0

如果这是你的代码(你想使所有隐藏在页面加载),你必须等待t他记录调用函数之前要准备好:

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

否则,如果调用该函数的文档被加载后,它工作正常。