我想解决这个问题：我遇到了一些问题，当点击按钮时，每个li标签列表的第一个项目的颜色会发生变化（最好是创建的）。我已经尝试在li标签中为列表的每个第一个项目创建一个id，但没有成功。下面是代码：
$(document).ready(function(){
$("#botao").click(function(){
$("p").css("color", "red");
});
});
<!-- begin snippet: js hide: false console: true babel: false --><!--- 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>"点击这里"按钮应该与我在问题中提供的其他js一起工作。
1条答案
按热度按时间mzillmmw1#
试试这个：
引用：：第一个子选择器