Question

让我解释一下，

我正在制作一个关于我在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>

Answer 1

您可以在按钮中添加data-target属性，该属性是要向上或向下滑动的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>

但首先你需要确保你没有重复的id，你现在正在做...所以先修复它。此外，hidden不是css display属性的有效值...我认为您的意思是display: none;（您可能与visibility: hidden;混淆）

一旦得到你的ID修复，你就可以为你要切换的每个部分实现以下jquery：

$(document).ready(function() {
    $('.lead a').on('click', function(e) {
        e.preventDefault();
        var target = $(this).data('target');
        $(target).slideDown();
    });

    $('.lead a').on('dblclick', function(e) {
        e.preventDefault();   
        var target = $(this).data('target');
        $(target).slideUp();
    });
});

＆＃13;

$(document).ready(function() {
    $('.lead a').on('click', function(e) {
        e.preventDefault();
        var target = $(this).data('target');
        $(target).slideDown();
    });
    
    $('.lead a').on('dblclick', function(e) {
        e.preventDefault();   
        var target = $(this).data('target');
        $(target).slideUp();
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">

<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" data-target="#extra_1">Show More Information</a>
  </p>
  <p id="extra_1" style="display: none;">extra information that may be less important, yet necesary</p>
</div>

<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_2" role="button" data-target="#extra_2">Show More Information</a>
  </p>
  <p id="extra_2" style="display: none;">extra information that may be less important, yet necesary</p>
</div>

＆＃13;

Answer 2

对于初学者，您的代码中存在重复的ID（对于extra_1和information_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操作创建函数？

2 个答案: