Question

我有两个li元素，每个元素都有图标，文字。我想在点击按钮时更改第一个li图标和文本。目前，如果我使用.text()

，它将替换整个锚标记内容

$(document).ready(function(){
  $("#changeicon").click(function(){
    $("#listitems li:eq(0) a span").removeClass("ic1").addClass("ic3");
    //$("#listitems li:eq(0) a").text("Icon3");//Uncomment this line and check
  });
});

span {
  display:block;
  width:32px;
  height:32px;
}
.ic1 {
  background:url("https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/menu-alt-32.png") no-repeat;
}
.ic2 {
  background:url("https://cdn0.iconfinder.com/data/icons/navigation-set-arrows-part-one/32/Grid-32.png") no-repeat;
}
.ic3 {
  background:url("https://cdn2.iconfinder.com/data/icons/4web-3/139/menu-32.png") no-repeat;
}
.ic4 {
  background:url("https://cdn3.iconfinder.com/data/icons/eightyshades/512/45_Menu-32.png") no-repeat;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="listitems">
    <li>
        <a href="">
            <span class="ic1"></span>
            Icon1
            <span class="ic1"></span>
        </a>
    </li>
    <li>
        <a href="">
            <span class="ic2"></span>
            Icon2
            <span class="ic2"></span>
        </a>
    </li>
</ul>
<input type="button" id="changeicon" value="Change 1 to 3">

有什么办法可以改变文字吗？

请不要提供$("#listitems li:eq(0) a").html('<span class="ic3"></span>Icon3<span class="ic3"></span>')之类的内容？我知道

Answer 1

我想到的是将文本放在某个元素中：

<li>
    <a href="">
        <span class="icon ic1"></span>
        <span class="text">Icon1</span>
        <span class="icon ic1"></span>
    </a>
</li>

然后在JS中执行类似的操作：

$(document).ready(function(){
  $("#changeicon").click(function(){
    $("#listitems li:eq(0) a .icon").removeClass("ic1").addClass("ic3");
    $("#listitems li:eq(0) a .text").text("Icon3");
  });
});

可能还有更好的方法来做到这一点

Answer 2

您可以使用nodeType属性仅过滤文本节点（它们具有nodeType == 3），然后使用textContent属性更改其内容。演示：

$('#listitems').contents().filter(function() {
        return this.nodeType == 3
    }).each(function(){
        this.textContent = this.textContent.replace('Icon1','Icon3');
    });

Answer 3

如果您无法将文字放入其自己的span元素中，请尝试以下操作：

＆＃13;

   

 $(document).ready(function(){
      $("#changeicon").click(function(){
        $("#listitems li:eq(0) a span").removeClass("ic1").addClass("ic3");
        $("#listitems li:eq(0) a").contents().filter(function() {
            return this.nodeType === 3; //Node.TEXT_NODE
  })[1].textContent = "Icon3";
        //$("#listitems li:eq(0) a").text("Icon3");//Uncomment this line and check
      });
    });

＆＃13;

span {
  display:block;
  width:32px;
  height:32px;
}
.ic1 {
  background:url("https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/menu-alt-32.png") no-repeat;
}
.ic2 {
  background:url("https://cdn0.iconfinder.com/data/icons/navigation-set-arrows-part-one/32/Grid-32.png") no-repeat;
}
.ic3 {
  background:url("https://cdn2.iconfinder.com/data/icons/4web-3/139/menu-32.png") no-repeat;
}
.ic4 {
  background:url("https://cdn3.iconfinder.com/data/icons/eightyshades/512/45_Menu-32.png") no-repeat;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="listitems">
    <li>
        <a href="">
            <span class="ic1"></span>
            Icon1
            <span class="ic1"></span>
        </a>
    </li>
    <li>
        <a href="">
            <span class="ic2"></span>
            Icon2
            <span class="ic2"></span>
        </a>
    </li>
</ul>
<input type="button" id="changeicon" value="Change 1 to 3">

＆＃13;

Answer 4

我的理解是您想要修改不在标签内的文本。

您可以使用文本节点的data属性执行此操作：

在当前页面（运行您的代码段）中，您可以执行以下操作：

document.getElementById('listitems').getElementsByTagName('li')[0].children[0].childNodes[2].data = "coucou";

此外，您可以通过将NodeList转换为Array然后在其上使用filter方法来检索文本节点：

Array.from(document.getElementById('listitems').getElementsByTagName('li')[0].children[0].childNodes).filter(el => el.data.indexOf('Icon2') != -1)[0]

希望它有所帮助，

祝你好运

Answer 5

这个$("#listitems li:eq(0) a").html($("#listitems li:eq(0) a").html().replace("Icon1","Icon3"));

怎么样？

$(document).ready(function(){
  $("#changeicon").click(function(){
    $("#listitems li:eq(0) a span").removeClass("ic1").addClass("ic3");
    $("#listitems li:eq(0) a").html($("#listitems li:eq(0) a").html().replace("Icon1","Icon3"));
    console.log($("#listitems li:eq(0) a").html());
    
    //Uncomment this line and check
  });
});

span {
  display:block;
  width:32px;
  height:32px;
}
.ic1 {
  background:url("https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/menu-alt-32.png") no-repeat;
}
.ic2 {
  background:url("https://cdn0.iconfinder.com/data/icons/navigation-set-arrows-part-one/32/Grid-32.png") no-repeat;
}
.ic3 {
  background:url("https://cdn2.iconfinder.com/data/icons/4web-3/139/menu-32.png") no-repeat;
}
.ic4 {
  background:url("https://cdn3.iconfinder.com/data/icons/eightyshades/512/45_Menu-32.png") no-repeat;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="listitems">
    <li>
        <a href="">
            <span class="ic1"></span>
            Icon1
            <span class="ic1"></span>
        </a>
    </li>
    <li>
        <a href="">
            <span class="ic2"></span>
            Icon2
            <span class="ic2"></span>
        </a>
    </li>
</ul>
<input type="button" id="changeicon" value="Change 1 to 3">

jQuery只需要更改元素中的文本内容

5 个答案: