Javascript 如何在不编写太多代码的情况下为多个jQuery操作创建函数？_Javascript_Php_Jquery_Html_Css

Javascript 如何在不编写太多代码的情况下为多个jQuery操作创建函数？

javascript php jquery html css

Javascript 如何在不编写太多代码的情况下为多个jQuery操作创建函数？,javascript,php,jquery,html,css,Javascript,Php,Jquery,Html,Css,让我解释一下我正在制作一个关于我在PHP中学习的所有内容的页面。我还想为这个页面添加大量的交互性。例如，我想添加一个显示更多信息的按钮（隐藏），并让jQuery向下滑动来完成这项工作。但是，我不想用一行又一行的代码使文件过时我试图制作一个网页，让我的按钮在不同的段落中执行相同的操作。我想知道是否有一种方法可以实现一个函数，以避免键入1000行代码来跟上所有按钮和段落。请帮帮我，先谢谢你 <?php $line_break = '<b><span class="bg

让我解释一下

我正在制作一个关于我在PHP中学习的所有内容的页面。我还想为这个页面添加大量的交互性。例如，我想添加一个显示更多信息的按钮（隐藏），并让jQuery向下滑动来完成这项工作。但是，我不想用一行又一行的代码使文件过时

我试图制作一个网页，让我的按钮在不同的段落中执行相同的操作。我想知道是否有一种方法可以实现一个函数，以避免键入1000行代码来跟上所有按钮和段落。请帮帮我，先谢谢你

<?php


$line_break = '<b><span class="bg-light m-0 p-0">/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\ </span></b>';

?>


<!doctype html>
<html lang="en">
  <head>
    <!-- LOGO -->
    <link rel="shortcut icon" type="image/x-icon" href="../imgs/logotree.png" />
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<script src="../js/jquery-3.2.1.min.js"></script>

    <title>Treehoose</title>
  </head>
  <body class="bg-secondary">





<div class="jumbotron bg-dark text-light text-center">
  <h1 class="display-4 ">5/<span class="text-primary">23</span>/18</h1>
  <p class="lead text-success p-0 m-0">PHP Arrays & Control Structures</p>
  <hr class="my-4">
  <p><b>Loops & Structuring </b></p>
  <p class="lead">
    <a class="btn btn-outline-success btn-lg" id="information_1" role="button">Show More Information</a>
  </p>
  <p id="extra_1" style="display: hidden;">extra information that may be less important, yet necesary</p>
</div>


<?php echo $line_break;?>


<div class="jumbotron bg-dark text-light text-center">
  <h1 class="display-4 ">5/<span class="text-primary">24</span>/18</h1>
  <p class="lead text-success p-0 m-0">PHP Arrays & Control Structures</p>
  <hr class="my-4">
  <p><b>Loops & Structuring </b></p>
  <p class="lead">
    <a class="btn btn-outline-success btn-lg" id="information_1" role="button">Show More Information</a>
  </p>
  <p id="extra_1" style="display: hidden;">extra information that may be less important, yet necesary</p>
</div>


<?php echo $line_break;?>

       <!-- jQuery -->

       <script>
         $(document).ready(function(){
          $('#extra_1').hide();
    $("#information_1").dblclick(function(){
        $("#extra_1").slideUp();
    });
    $("#information_1").click(function(){
        $("#extra_1").slideDown();
    });
});

       </script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
  </body>
</html>


树梢
5/23/18
PHP数组和控制结构

循环与结构

显示更多信息

可能不太重要但必要的额外信息
5/24/18
PHP数组和控制结构

循环与结构

显示更多信息

可能不太重要但必要的额外信息
$（文档）.ready（函数（）{
$（“#额外的_1”）.hide（）；
$（“#信息_1”）.dblclick（函数（）{
$（“#额外1”）.slideUp（）；
});
$（“#信息_1”）。单击（函数（）{
$（“#额外#1”）.slideDown（）；
});
});

您可以向按钮添加一个

数据目标

属性，该属性将是要向上或向下滑动的

标记的id

<p class="lead">
   <a data-target="#extra_1" class="btn btn-outline-success btn-lg" id="information_1" role="button">Show More Information</a>
</p>
<p id="extra_1" style="display: none;">extra information that may be less important, yet necesary</p>

$（文档）.ready（函数（）{
$（'.lead a'）。在（'click'，函数（e）上{
e、 预防默认值（）；
var target=$（this.data（'target'）；
$（目标）.slideDown（）；
});
$（'.lead a'）。on（'dblclick'，函数（e）{
e、 预防默认值（）；
var target=$（this.data（'target'）；
$（目标）.slideUp（）；
});
});

5/23/18
PHP数组和控制结构

循环与结构

显示更多信息

额外的信息可能不那么重要，但却是必要的
5/24/18
PHP数组和控制结构

循环与结构

显示更多信息

额外的信息可能不那么重要，但却是必要的
您可以向按钮添加一个数据目标
属性，该属性将是要向上或向下滑动的p
标记的id
<p class="lead">
   <a data-target="#extra_1" class="btn btn-outline-success btn-lg" id="information_1" role="button">Show More Information</a>
</p>
<p id="extra_1" style="display: none;">extra information that may be less important, yet necesary</p>


$（文档）.ready（函数（）{
$（'.lead a'）。在（'click'，函数（e）上{
e、 预防默认值（）；
var target=$（this.data（'target'）；
$（目标）.slideDown（）；
});
$（'.lead a'）。on（'dblclick'，函数（e）{
e、 预防默认值（）；
var target=$（this.data（'target'）；
$（目标）.slideUp（）；
});
});

5/23/18
PHP数组和控制结构

循环与结构

显示更多信息

额外的信息可能不那么重要，但却是必要的
5/24/18
PHP数组和控制结构

循环与结构

显示更多信息

额外的信息可能不那么重要，但却是必要的
对于初学者，代码中有重复的id（用于额外的\u 1和信息\u 1）。永远不要把重复的ID放在同一页上。我猜你是想让它们独一无二，比如extra_1、extra_2，你想让它们在同一个巨型机中分别用信息按钮打开/关闭
您可以使用以xxx[id^=“xxx”]
开头的id属性来定位元素。对于每个按钮，获取父级，然后获取下一个同级
$(document).ready(function(){
    $('[id^="extra"]').hide(); // or use css to hide by default?

    $('[id^="information"]').dblclick(function(){
        $(this).parent().next().slideUp();
    });

    $('[id^="information"]').click(function(){
        $(this).parent().next().slideDown();
    });
});

或者，您可以使用类选择器，例如按钮的.btn outline success
。
对于初学者，您的代码中有重复的id（用于额外的\u 1和信息\u 1）。永远不要把重复的ID放在同一页上。我猜你是想让它们独一无二，比如extra_1、extra_2，你想让它们在同一个巨型机中分别用信息按钮打开/关闭
您可以使用以xxx[id^=“xxx”]
开头的id属性来定位元素。对于每个按钮，获取父级，然后获取下一个同级
$(document).ready(function(){
    $('[id^="extra"]').hide(); // or use css to hide by default?

    $('[id^="information"]').dblclick(function(){
        $(this).parent().next().slideUp();
    });

    $('[id^="information"]').click(function(){
        $(this).parent().next().slideDown();
    });
});

或者，您可以使用类选择器，例如按钮的.btn outline success
。
您可以在类上使用jquery选择器（而不是id），并将相同的行为一次应用到多个元素（）您有多个id为information\u 1
和extra\u 1的元素。。。id应该是唯一的。您可以在类上使用jquery选择器（而不是id），并将相同的行为一次应用到多个元素（）您有多个id为information\u 1
和extra\u 1
的元素。。。id应该是独一无二的。非常感谢！我刚开始做一名网络开发人员，我很欣赏这些技巧和工具。非常感谢！我刚开始做一名网络开发人员，我很欣赏这些技巧和工具。非常感谢！我刚开始做一名网络开发人员，我很欣赏这些技巧和工具。非常感谢！我刚开始做一名网络开发人员，我很欣赏这些技巧和工具。