Toplam divs durumuna göre toplamlar nasıl hesaplanır?

Sahip olduğum şey JavaScript üzerine bindirilmiş divs bulunan bir ev planı.

Bu div ID'lerin gösterilip gösterilmemesine bağlı olarak rakamları hesaplayan bir işlev oluşturmak ve sonra bu cevabı döndürmek istiyorum.

Here is the 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();
}

Ve HTML:

<div id="main-bg" class="main-img">
    
</div>
<div id="main-ppa" class="main-img">
    
</div>
<div id="main-gar" class="main-img">
    
</div>
<div id="main-cpo" class="main-img">
    
</div>
<div id="main-cpa" class="main-img">
    
</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 ile şöyle bir şey:

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

Herhangi bir yardım çok takdir edilecektir.

1
Sorun nedir?
katma yazar jwatts1980, kaynak
Sanırım sorunu görüyorum. Öğenin style özelliğini kontrol ediyorsunuz, ancak ayarlamıyorsunuz. JS, CSS sınıfınızın display özelliğini ayarlayıp ayarlamadığını görmek için CSS dosyasına girmez.
katma yazar jwatts1980, kaynak
@LeeGellie, jQuery kullanmaya açık mısın? Bu çok daha kolay olurdu.
katma yazar Amy, kaynak
return tahmini yerine return tahmini kullan ();
katma yazar vinayakj, kaynak
Evet sayfaya yükledim. Sadece bir profesyonel değil.
katma yazar Lee Gellie, kaynak
Maalesef, JavaScript ile stilleri ayarlıyorum, bu yüzden bu adımdaki stilleri bulup düzenliyor. Ancak. Bana geri dönüşün basılı kısmını bile vermiyor "Tahmini toplamınız: $"
katma yazar Lee Gellie, kaynak
Çalışmıyor
katma yazar Lee Gellie, kaynak

6 cevap

check this fiddle https://jsfiddle.net/c89rwy8y/1/

Hesaplanan stili almak için @brain_bacon yanıtını biraz değiştirdim

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

you can check the limitation of getComputedStyle HERE

1
katma
GetComputedStyle :) kullanmak için kemanımı düzenlerken cevabınızı özledim sanırım :)
katma yazar brain_bacon, kaynak

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

Başlıca sorunlar, komut dosyalarınızın ayrılmasıydı ve tahmin bir işlev olduğunda, değer bir değer olduğunda return estimate() öğesini çalıştırıyordunuz.

Bazı küçük kod geliştirmeleri yaptım, ancak daha net ve temiz olmak için hala çok uzun bir yol olabilir.

1
katma
@ Şerif Ahmed'in düzenlemelerinde bazı küçük değişiklikler yapıldı.
katma yazar brain_bacon, kaynak
son bir düzenleme. CSS'de farklı görüntüleme türleri olduğundan, bunun yerine ! == 'none' değiştirdim.
katma yazar brain_bacon, kaynak
Bağlantıyı ve kemanı güncelledim. @ jwatts1980, stil bilgisinin CSS'de olduğundan ve satır içi olmadığından kullanılamayacağını önerdi. GetComputedStyle'ı bu yığın akışı yanıtı tarafından önerildiği gibi ekledim
katma yazar brain_bacon, kaynak
Teşekkür ederim. Hesaplamayı, görüntülenen divs için katma değerle toplam olarak almakta hala sorun yaşıyorum.
katma yazar Lee Gellie, kaynak
Çok teşekkür ederim. Harika çalışıyor.
katma yazar Lee Gellie, kaynak

Javascript'inizi bu şekilde değiştirmeyi deneyin:

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

Ve bunun için HTML'iniz:

<div id="main-bg" class="main-img">
 
</div>
<div id="main-ppa" class="main-img" style="display:none;">
 
</div>
<div id="main-gar" class="main-img" style="display:block;">
 
</div>
<div id="main-cpo" class="main-img" style="display:block;">
 
</div>
<div id="main-cpa" class="main-img" style="display:none;">
 
</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, doğrudan CSS’inize bakamaz. Satır içi şekillendirme kullanıyorsanız, kodunuz istenildiği şekilde çalışmalıdır.

0
katma

element.style.display özelliği, stil HTML özelliğine bakar. Bunun gibi:

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

So

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

will alert none.

But when the display style is being set by the CSS file like you are doing, it will alert either undefined or an empty string.

Being able to tell for sure whether an element is actually showing is more complicated. See this SO answer: Check if element is visible in DOM

If this is a simple application you are doing, then setting the style attribute may be the easiest. Another way would be to put in a checkbox, and read whether it is checked or not.

0
katma
@LeeGellie Bu fonksiyon yeniden kullanılabilir gibi görünüyor. Bence onu gerektiği kadar arayabilirsin.
katma yazar jwatts1980, kaynak
@LeeGellie Amy'nin cevabının matematiksel düzeltmeler konusunda daha eksiksiz olduğunu düşünüyorum. Sadece element.style özelliğinin nasıl çalıştığını anladığınızdan emin olmak istedim ve bir yorum için çok uzun sürdü.
katma yazar jwatts1980, kaynak
Bir div'in durumunu bir JavaScript onClick düğmesiyle değiştirdiğimde _calculate_total yeniden hesaplamasının bir yolu var mı?
katma yazar Lee Gellie, kaynak
Teşekkürler. Bunu düzelttim. Şimdi orjinal rakamını gösteriyor ama "blok" olarak görüntülenen divlerde artış yok
katma yazar Lee Gellie, kaynak
Evet, ikinize de teşekkürler.
katma yazar Lee Gellie, kaynak
"Document.getElementById (" tahmini ") ekledim. İnnerHTML =" Tahmini toplamınız "". ');" Düğmelerimin fonksiyonlarını sonuna div durumlarını değiştirmek için ve mükemmel çalışıyor!
katma yazar Lee Gellie, kaynak

Böyle bir şey dene:

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;
}
0
katma
Bu işe yaramayacak. element.style.display özelliği yalnızca öğenin <div style = ""> niteliğine bakar. display özelliği CSS sınıfı tarafından ayarlanıyor ve style.display kullanılamayacak.
katma yazar jwatts1980, kaynak
@LeeGellie Bu konudaki yorumlarıma bir cevap yazdım.
katma yazar jwatts1980, kaynak
Haklısın. OP jQuery kullanabilirse cevabımı buna göre düzenleyeceğim.
katma yazar Amy, kaynak
Tam bir cevap almak için cevabımı jwatt ile birleştirmeniz gerekecek. Tarz meselesini fark etmedim.
katma yazar Amy, kaynak
NEREDEYSE!!! Bana blok vermiyor. Sadece divs hala yapmadığı "blok" olarak göründüğü zaman miktarları eklemeye ihtiyacım var.
katma yazar Lee Gellie, kaynak
Öyleyse, HTML’de bir stil sayfasından ziyade stile sahip olmak için onları değiştirmem gerekiyor mu?
katma yazar Lee Gellie, kaynak

Kodunuzla ilgili birçok sorun var. Öncelikle, işlev çağrılmadan önce kullanılabilir durumda olmalıdır. Bu yüzden sol üstteki jQuery altındaki ayara sarılmaya gerek yok<head>. And then there your code is has lots of issues. You need to understand hoisting and the correct syntax using native JavaScript to check if a element is visible. Here's the updated code:

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

tahmin bir işlev değildir, bu yüzden estimate ();

0
katma