jQuery

Question

如何使用 jQuery 更改 class 的 text？

这里是 html 代码：

<div class="box1">
    <div class="box box-default">
      <div class="box-header with-border">
        <h3 class="box-title">Collapsable</h3>
        <div class="box-tools pull-right">
          <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
        </div><!-- /.box-tools -->
      </div><!-- /.box-header -->
      <div class="box-body" id="testBody">
        The body of the box
      </div><!-- /.box-body -->
    </div><!-- /.box -->
</div>      

<div class="box2">
    <div class="box box-default">
      <div class="box-header with-border">
        <h3 class="box-title">Collapsable</h3>
        <div class="box-tools pull-right">
          <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
        </div><!-- /.box-tools -->
      </div><!-- /.box-header -->
      <div class="box-body" id="testBody">
        The body of the box
      </div><!-- /.box-body -->
    </div><!-- /.box -->
</div>

如何将 box1 和 box2 box-title class text 更改为不同的值？

我指的是每个盒子的这一行 html 代码：

<h3 class="box-title">Collapsable</h3>

这是我的代码：

$('.box1.box box-default.box-header with-border.box-title').text("Box 1 title");
$('.box2.box box-default.box-header with-border.box-title').text("Box 2 title");

文本未更改，控制台中未显示任何错误。

提前致谢。

Answer 1

.box1.box box-default.box-header with-border.box-title

是一个不正确的选择器。只需做

$('.box1 .box-title').text("Box 1 title");

选择器说的是 -> 容器 .box1 包含直接或嵌套 .box-title

$('.box1 .box-title').text("Box 1 title");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="box1">
    <div class="box box-default">
      <div class="box-header with-border">
        <h3 class="box-title">Collapsable</h3>
        <div class="box-tools pull-right">
          <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
        </div><!-- /.box-tools -->
      </div><!-- /.box-header -->
      <div class="box-body" id="testBody">
        The body of the box
      </div><!-- /.box-body -->
    </div><!-- /.box -->
</div>      

<div class="box2">
    <div class="box box-default">
      <div class="box-header with-border">
        <h3 class="box-title">Collapsable</h3>
        <div class="box-tools pull-right">
          <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
        </div><!-- /.box-tools -->
      </div><!-- /.box-header -->
      <div class="box-body" id="testBody">
        The body of the box
      </div><!-- /.box-body -->
    </div><!-- /.box -->
</div>

Answer 2

改变这个：

$('.box1.box box-default.box-header with-border.box-title').text("Box 1 title");
$('.box2.box box-default.box-header with-border.box-title').text("Box 2 title");

为此：

$('.box1.box box-default.box-header with-border.box-title').html("Box 1 title");
$('.box2.box box-default.box-header with-border.box-title').html("Box 2 title");

Answer 3

你可以试试

$('.box-title').val("Box 1 title");

Answer 4

您的代码有问题...

错误的选择器

看看你的HTML，box-header也有classwith-border。但是你传入的选择器 jQuery 讲述了一个不同的故事。

$('.box1.box box-default.box-header with-border.box-title')

...实际上是

$('.box1 .box.box-default .box-header.with-border .box-title')

具有多个 class 的元素组合在一起作为 CSS 选择器。在中间包含一个 space 意味着右边的那个是左边那个的 descendant。

选择器太多

虽然这不会妨碍您获得所需的结果，但使用不太具体的 CSS 选择器始终是一个好习惯。您正在寻找的内容可以通过执行以下操作轻松完成。

$(".box1 .box-title").text("Box 1 Title");
$(".box2 .box-title").text("Box 2 Title");

jQuery - 更改 class 的文本属性

jQuery - Changing the text property of a class

html

text

class

selector

错误的选择器

选择器太多

jQuery - 更改 class 的文本 属性

jQuery - Changing the text property of a class

html

jquery

text

class

selector

错误的选择器

选择器太多

jQuery - 更改 class 的文本属性