JavaScript語句與CSS條件

我做了一個小擾流板JavaScript語句與CSS條件

<p id="xyz" class="class" onclick="if(document.getElementById 
    ('zyx') .style.display=='none') {document.getElementById 
    ('zyx') .style.display='block'}else{document.getElementById 
    ('zyx') .style.display='none'}">Spoiler</p> 
<div id="zyx">Some content</div>

我正在尋找一種方法來添加一個「+」，如果擾流器被關閉，一個「 - 」如果擾流板是開放的這段落。我想也許在if語句與像

If xyz display:none show +, else show -

任何考慮過的條件？非常感謝

來源

2015-09-06 Necros Aeturnus

添加this.innerHTML來設置html標記。下面類似的代碼：

<p id="xyz" class="class" onclick="if(document.getElementById 
 
    ('zyx') .style.display=='none') {document.getElementById 
 
    ('zyx') .style.display='block';this.innerHTML='- Spoiler';}else{document.getElementById 
 
    ('zyx') .style.display='none';this.innerHTML='+ Spoiler';}">- Spoiler</p> 
 
<div id="zyx">Some content</div>

來源

2015-09-06 08:30:45 Jackie

代碼轉儲不是有用的答案。說*你做了什麼，以及*爲什麼*。 –

@ T.J。克勞德，非常感謝你指出。 – Jackie

的作品就像一個魅力，innerHTML添加和工作不完美，謝謝:) –

更好的方法是

<p id="xyz" class="class" onclick="var zyx= document.getElementById('zyx');zyx.style.display=zyx.style.display=='none'?'block':'none';var sp=this.innerHtml;sp=sp=='Spoiler +'?'Spoiler -':'Spoiler +';">Spoiler</p>

一些內容

來源

2015-09-06 08:35:31 Ahmadbaba46

首先，我不會用一個onclick屬性做到這一點。將代碼放入HTML是一種反模式。你已經在使用jQuery，所以讓我們使用它。

首先，我們可以通過toggle切換zyx的可見性。然後，我們可以使用段落上的類和一些CSS切換段落上的+和-。

$("#xyz").click(function() { 
 
    $("#zyx").toggle(); 
 
    $(this).toggleClass("expanded"); 
 
});

p .minus { 
 
    display: none; 
 
} 
 
p.expanded .minus { 
 
    display: inline; 
 
} 
 
p.expanded .plus { 
 
    display: none; 
 
}

<p id="xyz" class="class">Spoiler <span class="plus">+</span><span class="minus">-</span></p> 
 
<div id="zyx" style="display: none">Some content</div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

當段具有類expanded，所述-示出;如果沒有，則顯示+。

您還可以通過切換跨度的知名度，改變+和-，使用上跨度::after內容做到這一點...

來源

2015-09-06 08:38:24

你需要jQuery is它將返回true/false來選擇：

if($('#xyz').is(':visible')){ 
    //if visible case add + 
    $('#xyz').text($('#xyz').text() + ' + '); 
} 
else{ 
    $('#xyz').text($('#xyz').text() + ' - '); 
}

來源

2015-09-06 08:41:10

在這種情況下，我會建議使用僞:before元素與content: '+'，因爲它是專門爲此設計的：插入裝飾元素。當你這樣做時，你應該分配一個類並在該類上應用樣式，因爲選擇器.class[style*='display: none']可能會導致跨瀏覽器兼容性問題。見T.J.克勞德的回答。

但是，我會建議使用不使用JS的不同方法。您可以使用隱藏的複選框元素。除了由於降低複雜性而減少錯誤發生之外，這很容易進行設計和實現。

你可以找到一個工作示例，其中包含註釋源here。

來源

2015-09-06 09:02:48

JavaScript語句與CSS條件

回答

相關問題