Question

我所拥有的是一个有javascript覆盖div的房屋计划。

我想创建一个函数，根据这些div id是否显示来计算数字，然后返回该答案。

这是JSFiddle https://jsfiddle.net/offtkdqk/

function calculate_total(ppa, cpa, cpo, gar) {
    var tot_price = 279500;
    var a = document.getElementById(ppa);
    if (a.style.display == 'block') var ppa_tot = 1000;
    var b = document.getElementById(cpa);
    if (b.style.display == 'block') var cpa_tot = 5000;
    var c = document.getElementById(cpo);
    if (c.style.display == 'block') var cpo_tot = 6000;
    var d = document.getElementById(gar);
    if (d.style.display == 'block') var gar_tot = 9000;
    var estimate = tot_price + ppa_tot + cpa_tot + cpo_tot + gar_tot;
    return estimate();
}

HTML：

<div id="main-bg" class="main-img">
    <img src="images/house.jpg" width="100%">
</div>
<div id="main-ppa" class="main-img">
    <img src="images/house-paved-patio.png" width="100%">
</div>
<div id="main-gar" class="main-img">
    <img src="images/house-garage.png" width="100%">
</div>
<div id="main-cpo" class="main-img">
    <img src="images/house-covered-porch.png" width="100%">
</div>
<div id="main-cpa" class="main-img">
    <img src="images/house-covered-patio.png" width="100%">
</div>
<div id="estimate"></div>
<script>
    document.getElementById("estimate").innerHTML = "Your estimated total is $" + calculate_total('main-ppa', 'main-cpa', 'main-cpo', 'main-gar');
</script>

使用CSS：

#main-ppa {display:none;}
#main-gar {display:block;}
#main-cpo {display:block;}
#main-cpa {display:none;}

非常感谢任何帮助。

Answer 1

I updated your fiddle to a working example

function getDisplay(id) {
    var element = document.getElementById(id);
    return element.currentStyle 
            ? element.currentStyle.display
            : getComputedStyle(element, null).display;
}

function calculate_total(ppa, cpa, cpo, gar) {
    var estimate = 279500;
    if(getDisplay(ppa) !== 'none') {
        estimate += 1000;
    }
    if(getDisplay(cpa) !== 'none') {
        estimate += 5000;
    }
    if(getDisplay(cpo).display !== 'none') {
        estimate += 6000;
    }
    if(getDisplay(gar) !== 'none') {
        estimate += 9000;
    }
    return estimate;
}

document.getElementById("estimate").innerHTML = "Your estimated total is $" + calculate_total('main-ppa', 'main-cpa', 'main-cpo', 'main-gar');

主要问题是，当估算值是值而不是函数时，您的脚本是分开的并且您正在运行return estimate()。

我做了一些小的代码改进，但它仍然可以走得更远，更清晰。

Answer 2

检查这个小提琴 https://jsfiddle.net/c89rwy8y/1/

我更改了@brain_bacon回答以获得计算出的样式

function calculate_total(ppa, cpa, cpo, gar) {
    var estimate = 0;
    if (getDisplay(document.getElementById(ppa)) == 'block') {
        estimate += 1000;
    }
    if (getDisplay(document.getElementById(cpa)) == 'block') {
        estimate += 5000;
    }
    if (getDisplay(document.getElementById(cpo)) == 'block') {
        estimate += 6000;
    }
    if (getDisplay(document.getElementById(gar)) == 'block') {
        estimate += 9000;
    }
    return estimate;
}

function getDisplay(element)
{
    return element.currentStyle ? element.currentStyle.display :
                          getComputedStyle(element, null).display;
}

document.getElementById("estimate").innerHTML = "Your estimated total is $" + calculate_total('main-ppa', 'main-cpa', 'main-cpo', 'main-gar');

您可以检查getComputedStyle HERE

的限制

Answer 3

尝试这样的事情：

function calculate_total(ppa, cpa, cpo, gar) {
    var a = document.getElementById(ppa);
    var b = document.getElementById(cpa);
    var c = document.getElementById(cpo);
    var d = document.getElementById(gar);
    var estimate = 0;

    if (a.style.display == 'block') estimate += 1000;
    if (b.style.display == 'block') estimate += 5000;
    if (c.style.display == 'block') estimate += 6000;
    if (d.style.display == 'block') estimate += 9000;

    return estimate;
}

Answer 4

您的代码存在很多问题。首先，函数在调用之前需要可用。所以你需要在左上角的jQuery下面设置No wrap-in＆lt; head＆gt;。然后你的代码有很多问题。您需要使用本机JavaScript了解提升和正确的语法，以检查元素是否可见。这是更新后的代码：

function calculate_total(ppa, cpa, cpo, gar) {
    var tot_price = 279500;
    var ppa_tot = 0;
    var cpa_tot = 0;
    var cpo_tot = 0;
    var gar_tot = 0;
    var a = document.getElementById(ppa);
    if (a.offsetParent!=null) ppa_tot = 1000;
    var b = document.getElementById(cpa);    
    if (b.offsetParent!=null) cpa_tot = 5000;
    var c = document.getElementById(cpo);
    if (c.offsetParent!=null) cpo_tot = 6000;
    var d = document.getElementById(gar);
    if (d.offsetParent!=null) gar_tot = 9000;

    var estimate = tot_price + ppa_tot + cpa_tot + cpo_tot + gar_tot;
    return estimate;
}

估算不是函数，所以你不应该返回估计（）;

Answer 5

element.style.display属性查看样式HTML属性。像这样：

<div id="test" style="display:none;">

所以

alert(document.getElementById("test").style.display);

会提醒none。

但是当CSS文件正在设置display样式时，它会提醒undefined或空字符串。

能够确定元素是否实际显示更复杂。请参阅此答案：Check if element is visible in DOM

如果这是一个简单的应用程序，那么设置style属性可能是最简单的。另一种方法是放入一个复选框，然后读取它是否被选中。

Answer 6

尝试将您的javascript更改为：

function calculate_total(ppa, cpa, cpo, gar) {
 var tot_price = 279500;
 var a = document.getElementById(ppa);
 if (a.style.display == 'block') var ppa_tot = 1000;
 var b = document.getElementById(cpa);
 if (b.style.display == 'block') var cpa_tot = 5000;
 var c = document.getElementById(cpo);
 if (c.style.display == 'block') var cpo_tot = 6000;
 var d = document.getElementById(gar);
 if (d.style.display == 'block') var gar_tot = 9000;
 var estimate = tot_price + ppa_tot + cpa_tot + cpo_tot + gar_tot;
 return estimate;
}

你的html：

<div id="main-bg" class="main-img">
 <img src="images/house.jpg" width="100%">
</div>
<div id="main-ppa" class="main-img" style="display:none;">
 <img src="images/house-paved-patio.png" width="100%">
</div>
<div id="main-gar" class="main-img" style="display:block;">
 <img src="images/house-garage.png" width="100%">
</div>
<div id="main-cpo" class="main-img" style="display:block;">
 <img src="images/house-covered-porch.png" width="100%">
</div>
<div id="main-cpa" class="main-img" style="display:none;">
 <img src="images/house-covered-patio.png" width="100%">
</div>
<div id="estimate"></div>
<script>
 document.getElementById("estimate").innerHTML = "Your estimated total is $" + calculate_total('main-ppa', 'main-cpa', 'main-cpo', 'main-gar');
</script>

Javascript无法直接查看您的CSS。如果使用内联样式，则代码应按预期工作。

如何根据div的当前状态计算总计

6 个答案: