使用 jQuery 在 H1 中添加小元素

Question

我正在尝试更改其中包含元素的 h1 的内容。 但是，当按钮触发文本更改时，会应用 H1 但不会应用小样式。

Here's the html:
<h1 class="card-title pricing-card-title" id="singlePrice">$55
<small class="text-muted"> / month</small>
</h1>

这是我的 jQuery：

// 点击年度按钮更改价格

   $('#annual').click(function(){
        $('#singlePrice').html('<h1 >$48 <small> / month </small> </h1>');
        console.log("I got clicked");
    })

Answer 1

您在 h1 内设置 h1。 您只想设置 h1 内部的内容。

 $('#annual').click(function() { $('#singlePrice').html('$48 <small class="text-muted"> / month </small>'); })

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.3/css/bootstrap.min.css" integrity="sha512-GQGU0fMMi238uA+a/bdWJfpUGKUkBdgfFdgBm72SUQ6BeyWjoY/ton0tEjH+OSH9iP4Dfh+7HM0I9f5eR0L/4w==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="card" style="width: 18rem;"> <div class="card-body"> <h1 class="card-title pricing-card-title" id="singlePrice">$55 <small class="text-muted"> / month</small> </h1> </div> </div> <button id='annual'>X</button>