javascript - 如何在不编写这么多代码的情况下为多个 jQuery 操作创建一个函数?
问题描述
让我解释,
我正在制作一个关于我在 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;
(您可能与 混淆visibility: hidden;
)
一旦你得到你的 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>
推荐阅读
- vb.net - 如何通过 VB.Net 2017 中的单选按钮对包含(3 个类别)破折号分隔名称的文件的列表框进行排序?
- visual-studio-code - PHP CS Fixer:生成 php-cs-fixer ENOENT。找不到可执行路径
- git - git 使多个远程服务器与所有分支保持同步
- algorithm - 寻找两条无限二维线的交点
- excel - 在 Excel VBA 上接收电报消息
- arrays - 将数组分配给一行多维数组时出错
- node.js - 数据处理完毕后如何响应客户端?(Express + Nodejs)
- java - java.lang.ClassCastException:java.util.LinkedHashMap 无法转换为 com.example.backendtest.Project
- c - 具有多个文件的项目中的 CMakeLists.txt
- c# - 哪种是使用委托的正确方法?