javascript 点击按钮更改所有段落的文本颜色

eufgjt7s 于 2023-02-07 发布在 Java

关注(0)|答案(3)|浏览(153)

我试图创建一个函数，改变所有段落（p）的颜色时，单击按钮，但我没有成功，我不明白这是为什么。
我想得到“p”标签，但是在jquery下面，你可以看到它不起作用。另外，css函数也是无关紧要的，它不起作用。我静静地等待着回应。
下面是HTML代码，下面是JS（Jquery）：

<!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">

      <p id="test" class="classA">Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>

     

    

     

    

     

     <!-- preciso alterar o texto deste parágrafo ao click do botão "Trocar 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>

 

 <td class="btnDoc">

    <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>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><button>Clique aqui e altere a cor do parágrafo </button>

      <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>

<script src="questao3.js"></script>

<script src="jquerycolor.js"></script>

</body>

</html>

$(document).ready(function(){

  $("button").click(function(){

      $("p").on({

        $(this).css("red");

  });

});

});

JavaScript

来源：https://stackoverflow.com/questions/75356774/change-the-text-color-of-all-paragraphs-with-the-click-of-the-button

3条答案

按热度按时间

00jrzges1#

尝试不使用on函数，并且还需要提供一个要更改的样式组件名称，如下所示：

$(document).ready(function(){
  $("button").click(function(){
    $("p").css("color", "red");
  });
});

赞(0）回复(0）举报 2023-02-07

bvk5enib2#

您在语法中有几个错误，您所需要的正确格式如下：

$(document).ready(function () {
  $("button").click(function () {
    $(this).parent().find("p").css("color", "red");
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!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>
    
  </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">
          <p id="test" class="classA">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit...
          </p>
          <!-- preciso alterar o texto deste parágrafo ao click do botão "Trocar 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”. -->

          <button
            id="dados"
            data-confirm=""
            data-iddocumento="189738"
            data-descricao="testte"
            type="button"
            class="btn btn-warning btn-xs 189738"
          >
            Clique aqui
          </button>

          <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>
          <button>Clique aqui e altere a cor do parágrafo</button>
          <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>
    <script src="main.js"></script>
  </body>
</html>

你必须在你的html中建立一个良好的结构，这样你就不必求助于.parent().parent()...。

赞(0）回复(0）举报 2023-02-07

dtcbnfnu3#

试试这个，如果你想改变所有的元素，你需要得到所有的元素，然后使用"each"迭代

$(document).ready(function(){

  $("button").click(function(){

      $('p').each(function() {
    $(this).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://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/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">

      <p id="test" class="classA">Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>

     

    

     

    

     

     <!-- preciso alterar o texto deste parágrafo ao click do botão "Trocar 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>

 

 <td class="btnDoc">

    <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>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><button>Clique aqui e altere a cor do parágrafo </button>

      <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>

<script src="questao3.js"></script>

<script src="jquerycolor.js"></script>

</body>

</html>

赞(0）回复(0）举报 2023-02-07

我来回答

javascript 点击按钮更改所有段落的文本颜色

3条答案

相关问题

热门标签

最新问答