動態地在HTML中移動結束標籤的位置

這個解決方案感覺就像是在我的舌頭上，但我不知道如何去做。考慮下面的HTML：動態地在HTML中移動結束標籤的位置

<span>This has some text. 
    <span>This has some more text.</span> 
    <span>And so on.</span> 
    <span>And so forth, et cetera, et cetera, et cetera...</span> 
</span>

每個跨度有一個點擊監聽器：

$("span").click(function() 
{ 
    $(this).css("color", "somecolor"); 
}

當父跨度它的CSS改變，是有辦法，以防止傳播到子元素的CSS變化？或者只是讓更改影響點擊範圍內的TEXT？

我知道有很多方法可以使html變得更容易，但是我正在處理由不能更改的遺留系統自動生成的格式不正確的html。

來源

2011-11-16 Indigenuity

總之，沒有。這是CSS在行動中的「級聯」部分。

您必須專門添加CSS才能撤消對這些子元素所做的更改。例如：

$("span").click(function() { 
    $(this).css("color", "blue") 
     .children().css("color","black"); 
});

根據你的HTML看起來完全像什麼，你可能需要從傳播到最span以及停止點擊：

$("span").click(function() { 
    e.stopPropagation(); 
    $(this).css("color", "blue") 
     .children().css("color","black"); 
});

一個可能不太複雜的解決方案涉及使用!important來確定子span的CSS樣式：http://jsfiddle.net/mblase75/ce2Av/2/ 但是，您需要以這種方式指定所有該外部跨度的子元素，這可能會變得複雜，具體取決於您的HTML。

如果你想讓孩子們不要只是一種顏色，而是保持他們之前的顏色，那麼事情會變得棘手。您必須事先使用數組緩存這些值，然後逐個重新指定它們。

來源

2011-11-16 16:44:19 Blazemonger

我最後不得不只是你在最後一段說什麼。我不想讓它談到這一點，但看起來似乎沒有其他辦法。謝謝！ – Indigenuity

點擊停止事件傳播並添加一些班級。在CSS中創建兩個規則 - 一般爲span，另一個爲class。點擊時，子元素不會受到影響。

的Javascript

$("span").click(function(e){ 
    e.stopPropagation(); 
    $(this).addClass("special"); 
});

CSS

span{ 
    color:#DDD; 
} 
.special{ 
    color:#0077cc; 
}

來源

2011-11-16 17:56:03

動態地在HTML中移動結束標籤的位置

回答

相關問題