如何使用 jQuery 在按鈕單擊時更改段落標簽的文本？

Question

我的問題主要是嘗試添加 function 和 jQuery 以將下面突出顯示的段落標記文本更改為新文本。 我只是需要它。 您不需要更改其他段落標簽。

 var titulo = document.querySelector(".ClassB"); var botao = document.querySelector(".troca-texto"); botao.addEventListener("click", function() { textContent = "Tobirama"; })

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <div class="container-fluid p-5 bg-primary text-white text-center"> <h1>Criando páginas com jQuery</h1> </div> <div class="container mt-5"> <div class="row div1"> <div class="col-sm-4 coluna1"> <p class="classA">Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p> // <p class="classB">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p><button class="troca-texto" value="">Trocar texto</button> <,-- preciso alterar o texto deste parágrafo ao click do botão "Trocar texto" --> // <ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> </div> <div class="col-sm-4 coluna2"> <p class="classC">Lorem ipsum dolor sit amet. consectetur adipisicing elit..,</p> <p class="classD">Ut enim ad minim veniam. quis nostrud exercitation ullamco laboris..,</p> </div> <div class="col-sm-4 coluna3"> <p class="classE">Lorem ipsum dolor sit amet. consectetur adipisicing elit..,</p> <p class="classF">Ut enim ad minim veniam. quis nostrud exercitation ullamco laboris..?</p> <ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul> </div> </div> <div class="row div2"> <h1>x caracteres</h1> <div class="col-12"> <input class="contar" type="text" value="Vamos contar os caractesres?" /> </div> </div> <div class="row div3"> <ul> <li>C++</li> <li>JAVA</li> <li>Python</li> <li>HTML/CSS</li> </ul> </div> </div> <div class="container-fluid rodape"> </div>

在上面的 JavaScript 代碼中，我嘗試獲取按鈕和標簽 ID，但沒有成功。

Answer 1

這取決於您要使用的標簽類型。

例如試試這個：

$(this).attr("tag","Tobirama");

 var titulo = document.querySelector(".ClassB"); var botao = document.querySelector(".troca-texto"); botao.addEventListener("click", function() { $(this).attr("tag","Tobirama"); })

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <div class="container-fluid p-5 bg-primary text-white text-center"> <h1>Criando páginas com jQuery</h1> </div> <div class="container mt-5"> <div class="row div1"> <div class="col-sm-4 coluna1"> <p class="classA">Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p> // <p class="classB">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p><button class="troca-texto" value="">Trocar texto</button> <,-- preciso alterar o texto deste parágrafo ao click do botão "Trocar texto" --> // <ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> </div> <div class="col-sm-4 coluna2"> <p class="classC">Lorem ipsum dolor sit amet. consectetur adipisicing elit..,</p> <p class="classD">Ut enim ad minim veniam. quis nostrud exercitation ullamco laboris..,</p> </div> <div class="col-sm-4 coluna3"> <p class="classE">Lorem ipsum dolor sit amet. consectetur adipisicing elit..,</p> <p class="classF">Ut enim ad minim veniam. quis nostrud exercitation ullamco laboris..?</p> <ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul> </div> </div> <div class="row div2"> <h1>x caracteres</h1> <div class="col-12"> <input class="contar" type="text" value="Vamos contar os caractesres?" /> </div> </div> <div class="row div3"> <ul> <li>C++</li> <li>JAVA</li> <li>Python</li> <li>HTML/CSS</li> </ul> </div> </div> <div class="container-fluid rodape"> </div>