JS函數不會隱藏元素

我試圖隱藏或顯示一個div時點擊一個鏈接。JS函數不會隱藏元素

這是我想說明的HTML部分或隱藏：

<div id="product"> 
    <div ng-repeat="producto in productos" >  
      <figure class="floating"> 
       <img ng-src="{{ producto.image }}" alt="image" class="rcorners3" style='width:100%;' border="0" alt="Null"> 
       <figcaption> {{ producto.name }}</figcaption> 
      </figure> 
    </div> 
</div>

當點擊這個：

<li onclick="isitvisible()" class="guides">

這就是我，當點擊運行該腳本：

<script type="text/javascript"> 
    function isitvisible() { 
     var vale = document.getElementById('product').offsetLeft; 

     if (vale <= 0) { 
      document.getElementById('product').style.visibility='hidden'; 
     } else { 
      document.getElementById('product').style.visibility='visible'; 
     }  
    }   
</script>

div會隱藏，但點擊後不會顯示。我認爲我失敗與offsetLeft，但不知道。

來源

2015-07-21 xxxxxxxxxxxxx

谷始終是相同的值。你總是隱藏元素，但從不顯示它。 – greenhoorn

如果你在獲得它後立即添加一個'console.log（vale）'，你看到了什麼？ – light

爲什麼你不使用角度方式？ – rolodex

offsetLeft在切換元素的可見性時不會更改。

試試這個isitvisible函數：

function isitvisible() { 
    // Get a reference to the element's style. 
    var style = document.getElementById('product').style; 

    if (style.visibility === 'hidden') { 
     style.visibility = 'visible'; 
    } else { 
     style.visibility = 'hidden'; 
    }  
}

還是有點shorter：

function isitvisible() { 
    var style = document.getElementById('product').style; 
    style.visibility = (style.visibility === 'hidden') ? 'visible' : 'hidden';  
}

來源

2015-07-21 13:59:13 Cerbrus

謝謝，這個作品很棒。我對JS很陌生，並不知道很多語法。 – xxxxxxxxxxxxx

不客氣，謝謝接受我的回答！你會學到更多的時間。 – Cerbrus

是的，我不會擔心它，總是做更多面向桌面的東西，現在我越來越多地進入網絡/應用程序，就像我來自史前時代。再次感謝。 – xxxxxxxxxxxxx

更改它以這樣的：

<script type="text/javascript"> 
    var style = document.getElementById('product').style; 
    function isitvisible() { 
     if (style.display=='none') { 
      style.display='block'; 
     } else { 
      style.display='none'; 
     }  
    }   
</script>

來源

2015-07-21 13:59:26 Legionar

JS函數不會隱藏元素

回答

相關問題