让我解释一下，
我正在制作一个关于我在 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>
最佳答案
您可以将 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; (你可能很困惑具有可见性:隐藏；)
一旦你得到你的 ids 修复，你可以为你想要切换的每个部分实现以下 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();
});
});
$(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();
});
});<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>关于javascript - 如何在不编写这么多代码的情况下为多个 jQuery 操作创建一个函数？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50494906/