英文:
How to change the color of the first item of a li tag list?
问题
我想解决这个问题：当点击按钮时，希望每个li标签列表的第一项的颜色发生变化（最好是创建的按钮）。我已经尝试为每个列表中的第一项创建一个id，但没有成功。以下是代码：
$(document).ready(function(){
$("#botao").click(function(){
$("p").css("color", "red");
});
});
<!-- 将以下内容添加到示例中的第二个按钮，文本为“单击此处”，并在单击时将其自己的文本更改为“已单击”。 -->
<!DOCTYPE html>
<html lang="en">
<head>
<title>jQuery</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
</head>
<body>
<div class="container-fluid p-5 bg-primary text-white text-center">
<h1>使用jQuery创建页面</h1>
</div>
<div class="container mt-5">
<div class="row div1">
<div class="col-sm-4 coluna1">
<div id="texto">
<!-- 将以下内容添加到示例中的第二个按钮，文本为“单击此处”，并在单击时将其自己的文本更改为“已单击”。 -->
</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>
<p class="classA">Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<input id="botao" type="button" class="btn btn-warning btn-xs 189738" value="Mudar de cor"/>
<div>
<td class="btnDoc">
<br>
<button id="dados" data-confirm="" data-iddocumento="189738" data-descricao="testte" type="button" class="btn btn-warning btn-xs 189738">Clique aqui</button>
</td>
</div>
<ul>
<!-- 创建一个选择器，更改所有列表的第一项文本的颜色。 -->
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</div>
</div>
<div>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</div>
<div class="row div3">
<div>
<ul>
<li>C++</li>
<li>JAVA</li>
<li>Python</li>
<li>HTML/CSS</li>
</ul>
</div>
</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>
<div class="container-fluid rodape">
</div>
<script src="2jquery.js"></script>
<script src="Jcollor.js"></script>
</body>
</html>
英文:
I would like to solve this question: I am having problems so that the first item of each li tag list has its color changed when clicking on a button (preferably created). I already tried to create an id for each first item of the lists, inside the li tag, without success. Here is the code below:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
$(document).ready(function(){
$("#botao").click(function(){
$("p").css("color", "red");
});
});
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<!--- Adicione ao exemplo um segundo botão com o texto “Clique aqui” e faça com
que ele, ao ser clicado, troque o seu próprio texto para “Já clicou”. -->
<!DOCTYPE html>
<html lang="en">
<head>
<title>jQuery</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
</head>
<body>
<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">
<div id="texto">
<!-- Adicione ao exemplo um segundo botão com o texto “Clique aqui” e faça com
que ele, ao ser clicado, troque o seu próprio texto para “Já clicou”. -->
</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>
<!-- Muda a cor dos parágrafos-->
<p class="classA">Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p><input id="botao" type="button" class="btn btn-warning btn-xs 189738" value="Mudar de cor"/>
<!-- Altera o texto do botão-->
<div> <td class="btnDoc"><br>
<button id="dados" data-confirm="" data-iddocumento="189738" data-descricao="testte" type="button" class="btn btn-warning btn-xs 189738">Clique aqui</button>
</td>
</div>
</div>
<ul>
<!--Crie um seletor que altere a cor do texto do primeiro item de todas as listas. -->
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</div>
<div>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</div>
<div class="row div3">
<div>
<ul>
<li>C++</li>
<li>JAVA</li>
<li>Python</li>
<li>HTML/CSS</li>
</ul>
</div>
</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>
<div class="container-fluid rodape">
</div>
<script src="2jquery.js"></script>
<script src="Jcollor.js"></script>
</body>
</html>
<!-- end snippet -->
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
<!-- language: lang-js -->
$(".btn").click(function(e) {
$(this).text("Já clicou");
});
<!-- end snippet -->
<!-- end snippet -->
The "click here" button should work with the other js I provided in the question.
答案1
得分: 1
以下是您要翻译的代码部分：
$(document).ready(function(){
$("#botao").click(function(){
$("ul li:first-child").css("color", "red");
});
});
参考链接：:first-child 选择器
英文:
Try this:
$(document).ready(function(){
$("#botao").click(function(){
$("ul li:first-child").css("color", "red");
});
});
Reference: :first-child selector
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论