afficher des valeurs différentes pour une variable dans différentes conditions

Question

var fontSize = $('.basic_unit').css('font-size'); 
 
var DocHeight = 11000; 
 
if(fontSize == 6){ 
 
    docHeight = 32000; 
 
}else if(fontSize == 8){ 
 
    docHeight = 48000; 
 
} 
 
var variableXXX = false; 
 
$(window).scroll(function() { 
 
\t 
 
    var scrollPercent = 100 * $(window).scrollTop()/DocHeight; 
 
\t 
 
    if (scrollPercent >= 5 && variableXXX == false){ 
 
     variableXXX = true; 
 
      alert($(document).scrollTop()); 
 
     } 
 
}); 
 
var variableXX = false; 
 
$(window).scroll(function() { 
 
\t 
 
    var scrollPercent = 100 * $(window).scrollTop()/DocHeight; 
 
\t 
 
    if (scrollPercent >= 5 && variableXX == false){ 
 
     variableXX = true; 
 
     $(".onscroll5").fadeIn(0); 
 
     } 
 
\t else if (scrollPercent < 5 && variableXX == true){ 
 
     variableXX = false; 
 
     $(".onscroll5").fadeIn(0); 
 
    } 
 
});

body{ margin:0; padding:0;} 
 
#header{width:100%; border-bottom:red 1px solid; position:fixed; height:30px;z-index:1000; margin-top:0;} 
 
#wraper{width:100%; padding-top:30px; text-align:center; } 
 
.basic_unit{width:800px; height:1300px; border:rgba(0,0,0,1.00) solid 1px; margin:auto;} 
 

 
.basic2{width:200px; height:200px; background:red; display:none;} 
 
.fixed {position:fixed;} 
 
.center_center{ display:inline-block;z-index:100;} 
 
#container{overflow:hidden; background:rgba(255,0,234,0.20); display:inline-block; } 
 
.left { margin-left:0; } 
 
.right { right:0; } 
 
.left_total {left:0;} 
 
.right_total {right:0;} 
 
.center { left:50%; transform:translate(-50%, 0); } 
 
.top { top:30px;; } 
 
.bottom { bottom:0; } 
 
.middle { top:50%; transform:translate(0, -50%); } 
 
.center.middle { transform:translate(-50%, -50%); } 
 
#right_wraper{ float:right; border: 1px black solid; width:300px; text-align:right;} 
 
.intime{width:200px; height:200px; background:blue; display:none;} 
 
.inscroll{width:20px; height:20px; background:yellow; display:none;} 
 
.triggers{ background:rgba(0,255,252,1.00); width:40px; height:40px;} 
 
@media (max-width: 700px) { 
 
    .basic_unit { 
 
\t \t font-size:2px; 
 
    } 
 
} 
 
@media (min-width:701px) and (max-width : 1200px) { 
 
    .basic_unit { 
 
\t \t font-size:6px; 
 
    } 
 
} 
 
@media (min-width : 1201px) { 
 
    .basic_unit { 
 
\t \t font-size:8px; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="header"> 
 
</div> 
 

 
<div id="wraper"> 
 
<div id="container"> 
 
<div id="right_wraper"> 
 
<!--IN SCROLL--> 
 
<div class="inscroll fontbig1 onscroll5 fixed middle outtime2 "></div> 
 
</div> 
 

 

 
<!--IN SCROLL--> 
 
<div class="inscroll fontmedium3 onscroll10 fixed bottom center outscroll25 right_left" style="border: solid black 50px"></div> 
 

 
<!--TRIGGERS--> 
 
<div class="triggers fixed top left_total"> 
 
</div> 
 
<div class="triggers fixed bottom left_total"> 
 
</div> 
 
<div class="triggers fixed top right_total"> 
 
</div> 
 
<div class="triggers fixed bottom right_total"> 
 
</div> 
 
<div class="basic_unit"> 
 
A <p style="font-size:6px;">A</p><p style="font-size:8px;">A</p><p style="font-size:2px;">A</p> 
 
</div> 
 

 
<div class="basic_unit"> 
 

 
</div> 
 
<div class="basic_unit"> 
 
</div> 
 
<div class="basic_unit"> 
 
</div> 
 
<div class="basic_unit"> 
 
</div> 
 
<div class="basic_unit"> 
 
</div> 
 

 

 
</div> 
 
</div>

je dois afficher une valeur différente pour la DocHeight variable dans les 3 cas suivants:

• Lorsque la taille de la police dans la classe basic_unit est 2px, DocHeight=11000px;
• Lorsque la taille de police dans la classe basic_unit est 6px, DocHeight=32500px;
• Lorsque la taille de la police dans la classe basic_unit est 8px, DocHeight=38500px;

if ($(".basic_unit").css("fontSize", 2)){ var DocHeight= 11000;}; 
 
if ($(".basic_unit").css("fontSize", 6)){ var DocHeight= 32500;}; 
 
if ($(".basic_unit").css("fontSize", 8)){ var DocHeight= 48500;};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 1

vous configurez le CSS, plutôt que de vérifier si elle est assortie d'une valeur. Ce que vous voulez faire est de vérifier si la valeur si la propriété CSS correspond à l'une de vos valeurs souhaitées.

var DocHeight; 
switch($(".basic_unit").css("fontSize")){ 
    case "2px": 
    DocHeight = 11000; 
    break; 
    case "6px": 
    DocHeight = 32500; 
    break; 
    case "8px": 
    DocHeight = 48500; 
    break; 
} 

Cela obtenir le obtenir la taille de la police $(".basic_unit").css("fontSize") et le comparer à chaque valeur dans l'instruction, le réglage de la DocHeight si elle se trouve.

Remarque: Je suppose que vous utilisez px, mais vous pouvez l'adapter pour em ou d'autres unités possibles.

Answer 2

var DocHeight; 

switch ($(".basic_unit").css("fontSize")) { 
    case '2px' : 
     DocHeight = 11000; 
     break; 

    case '6px' : 
     DocHeight = 32500; 
     break; 

    case '8px' : 
     DocHeight = 48500; 
     break; 
} 

Answer 3

Hmm, avez-vous lu jquery docs à propos de .css() fucntion?

Lorsque vous exécutez:

if ($(".basic_unit").css("fontSize", 2)){ var DocHeight= 11000;}; 
if ($(".basic_unit").css("fontSize", 6)){ var DocHeight= 32500;}; 
if ($(".basic_unit").css("fontSize", 8)){ var DocHeight= 48500;}; 

DocHeight sera pris de fin si, parce que .css(property, value) valeur de consigne, pas obtenir.

Je pense que vous devez ckeck valeur?

var fontSize = $('.basic_unit').css('font-size'); 
var docHeight = 11000; 
if(fontSize == '6px'){ 
    docHeight = 32000; 
}else if(fontSize == '8px'){ 
    docHeight = 48000; 
}