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() {
	
    var scrollPercent = 100 * $(window).scrollTop() / DocHeight;
	
     if ( scrollPercent >= 5 && variableXXX == false){
        variableXXX = true;
          alert($(document).scrollTop()); 
      }
});
var variableXX = false;
$(window).scroll(function() {
	
    var scrollPercent = 100 * $(window).scrollTop() / DocHeight;
	
     if ( scrollPercent >= 5 && variableXX == false){
        variableXX = true;
         $(".onscroll5").fadeIn(0); 
      }
	  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 {
		font-size:2px;
    }
}
@media (min-width:701px) and (max-width : 1200px) {
    .basic_unit {
		font-size:6px;
    }
}
@media (min-width : 1201px) {
    .basic_unit {
		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>

我需要在以下3种情况下为变量DocHeight显示不同的值：

当班级basic_unit中的字体大小为2px时，DocHeight=11000px;
当班级basic_unit中的字体大小为6px时，DocHeight=32500px;
当班级basic_unit中的字体大小为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

var DocHeight;

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

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

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

Answer 2

您正在设置CSS，而不是检查它是否与值匹配。你想要做的是检查CSS属性是否与你想要的值匹配。

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

这将得到字体大小$(".basic_unit").css("fontSize")并将其与语句中的每个值进行比较，如果找到则设置DocHeight。

注意：我假设您正在使用px，但您可以针对em或其他可能的单位进行调整。

Answer 3

嗯，你读过有关.css() fucntion的jquery文档吗？

执行时：

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

如果因为.css(property, value)设置值而没有得到，那么DocHeight将从结尾处获取。

我认为你需要ckeck值？

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

在不同条件下显示变量的不同值

3 个答案: