Question

我有一个问题，我需要用其他文本替换span中的文本，同时不要破坏嵌套的div。

基本上当我使用.html()方法时，内部div会被覆盖，导致它消失。

以下代码以及jsfiddle.net

    .textLabel {

        font-size: 11px;
        font-weight: 200;
        letter-spacing:1px;
        position: absolute;
        width: auto;
        height: 33px;
        line-height: 32px;
        background-color: rgba(0,0,0, 1);
        -moz-border-radius: 17px;
        -webkit-border-radius: 17px;
        border-radius: 17px;
        color: white;
        text-align: left;
        padding-left: 44px;
        padding-right: 20px;
    }

    .circ 
    {
        position: absolute;
        top: 50%;
        margin-top: -10px;
            left: 7px;
        width: 13px;
        height: 13px;
        background-color: white;
        -moz-border-radius: 11px;
        -webkit-border-radius: 11px;
        border-radius: 11px;
        border: solid 4px black;
        cursor:pointer;
    }

    .circ:hover 
    {
        position: absolute;
        /*top: 50%;*/
        margin-top:-20px;
        margin-left:-13px;

        width: 31px;
        height: 31px;
        background-color: blue;
        -moz-border-radius: 22px;
        -webkit-border-radius: 22px;
        border-radius: 22px;
        border: solid 6px white;
    }

    var otherText = "This is some other text";
            var noText = "";
            var spanID = "#s1";

            $("#b1").hover(function() {

              $(spanID).html(otherText);

            }, function() {

              $(spanID).html(noText);

            });

在此示例中，当我将鼠标悬停在ID为“b1”的div上时，它会从文档中消失。

我做错了什么？

Answer 1

另一种方法是，只需将文字放在范围内，然后使用text或html。

更新了fiddle

Answer 2

您可以分离范围，替换HTML，然后重新附加范围，如下所示：

$("#b1").hover(function(){
    var store = $('#b1', spanID).detach();
    $(spanID).html(otherText);
    $(spanID).append(store);

}, function() {
    var store = $('#b1', spanID).detach();
    $(spanID).html(noText);
    $(spanID).append(store);
});

分叉小提琴：http://jsfiddle.net/wzZSx/1/

我希望这有帮助！

jquery替换span文本而不破坏内部div

2 个答案: