js 代码复用 点击事件

最新推荐文章于 2023-11-19 13:55:18 发布
最新推荐文章于 2023-11-19 13:55:18 发布
阅读量215 收藏
点赞数
文章标签： javascript servlet html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/korey__/article/details/126612672
版权

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        li {

            margin-bottom: 10px;

        }

        /* .box{

            display: none;

        } */

        .box2 {

            display: none;

            /* display: block; */

        }

        input {

            width: 160px;

            height: 15px;

        }

        .box span:nth-child(2) {

            text-decoration: underline;

            color: #352fb8;

        }

    </style>

</head>

<body>

    <ul>

        <li>

            <div class="box">

                <span>JavaScript权威指南</span> <span>编辑</span>

            </div>

            <div class="box2">

                <input type="text" value="JavaScript权威指南">

                <span class="a1">保存</span>

                <span class="a1">取消</span>

            </div>

        </li>

        <li>

            <div class="box">

                <span>JavaScript权威指南</span> <span>编辑</span>

            </div>

            <div class="box2">

                <input type="text" value="JavaScript权威指南">

                <span class="a1">保存</span>

                <span class="a1">取消</span>

            </div>

        </li>

        <li>

            <div class="box">

                <span>JavaScript权威指南</span> <span>编辑</span>

            </div>

            <div class="box2">

                <input type="text" value="JavaScript权威指南">

                <span class="a1">保存</span>

                <span class="a1">取消</span>

            </div>

        </li>

        <li>

            <div class="box">

                <span>JavaScript权威指南</span> <span>编辑</span>

            </div>

            <div class="box2">

                <input type="text" value="JavaScript权威指南">

                <span class="a1">保存</span>

                <span class="a1">取消</span>

            </div>

        </li>

        <li>

            <div class="box">

                <span>JavaScript权威指南</span> <span>编辑</span>

            </div>

            <div class="box2">

                <input type="text" value="JavaScript权威指南">

                <span class="a1">保存</span>

                <span class="a1">取消</span>

            </div>

        </li>

        <li>

            <div class="box">

                <span>JavaScript权威指南</span> <span>编辑</span>

            </div>

            <div class="box2">

                <input type="text" value="JavaScript权威指南">

                <span class="a1">保存</span>

                <span class="a1">取消</span>

            </div>

        </li>

        <li>

            <div class="box">

                <span>JavaScript权威指南</span> <span>编辑</span>

            </div>

            <div class="box2">

                <input type="text" value="JavaScript权威指南">

                <span class="a1">保存</span>

                <span class="a1">取消</span>

            </div>

        </li>

     

    </ul>

    <script>

        // var oBox = document.getElementsByClassName("box")[0];

        // var oSpan = oBox.getElementsByTagName("span");

        // var oBox2 = document.getElementsByClassName("box2")[0];

        // var a1 = oBox2.getElementsByClassName("a1");

        // var inp = oBox2.getElementsByTagName("input")[0];

        var list = document.getElementsByTagName("li");

        for (var i = 0; i < list.length; i++) {

            add(list[i]);

        }

        function add(parent) {

            var oBox = parent.getElementsByClassName("box")[0];

            var oSpan = parent.getElementsByTagName("span");

            var oBox2 = parent.getElementsByClassName("box2")[0];

            var a1 = parent.getElementsByClassName("a1");

            var inp = parent.getElementsByTagName("input")[0];

           

            oSpan[1].onclick = function () {

                oBox.style.display = "none"

                oBox2.style.display = "block"

            }

            a1[0].onclick = function () {

                oBox.style.display = "block"

                oBox2.style.display = "none"

                oSpan[0].innerHTML = inp.value

            }

            a1[1].onclick = function () {

                oBox.style.display = "block"

                oBox2.style.display = "none"

            }

        }

    </script>

</body>

</html>

岄.
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript 注册事件代码
10-28
为了进一步提高代码的可维护性和复用性，我们可以将事件注册的逻辑封装到一个通用的工具函数或模块中，以便在其他项目中直接调用。这不仅提高了代码的可读性，还能减少重复的工作，提升开发效率。 总之，JavaScript...
js怎么处理重复点击
weixin_35752645的博客
12-17 821
在 JavaScript 中，可以通过以下方法来处理重复点击： 使用 disable 属性：可以将按钮的 disable 属性设置为 true，这样在点击之后就无法再次触发事件。然后在回调函数中将 disable 属性设置为 false 即可恢复按钮的正常状态。 document.getElementById('button').addEventListener('click', functi...
a标签的onclick事件，防止重复提交，js中让onclick点击事件只执行一次！
i_yuanpeng的博客
03-18 6679
<a>标签如果中的onclick事件点击几次就触发几次，就会出现多次请求，所以再次点击的时候不让其再触发！ 有2种方式实现，下面详细介绍： 1、不用jQuery的方式：（click事件被执行的时候，把它这个事件本身给清空。） <a href="javascript:;" id="buttonId" onClick="buttonSubmit()" >按钮</a> <script type="text/javascript"> //...
最简单的js点击出现层代码
最新发布
weixin_67371190的博客
11-19 102
【代码】最简单的js点击出现层代码。
JavaScript的点击事件代码例子（侵权就删）
IKUNzhenin的博客
10-06 275
在上面的例子中，我们有一个按钮元素btn。通过addEventListener()方法，我们为按钮元素绑定了’click’事件的点击事件处理程序。点击事件是JavaScript中常用的事件之一。通过以上代码，你可以为任何HTML元素绑定点击事件处理程序，以便在点击时执行相应的操作。事件处理程序中的事件对象表示了事件的详细信息，例如触发事件的目标元素可以通过。当点击按钮时，事件处理程序被触发。关键字也指向了当前元素，即按钮元素。此外，事件处理程序中的。
JavaScript中按钮点击事件的几种实现方式
jsjxyinghan的博客
05-26 1万+
对于方法二，一定要把script代码块写在body的尾部，但是如果说硬是要写在head标签内的话，一定要在window.load里面，或者在jq的另一种写法$(document).ready()。这个是代码执行顺序的原因。btn.addEventListener('click',function() {alert('你点击了按钮哦！')},false);alert("你点击了按钮哦！alert("你点击了按钮哦");alert("你点击了按钮哦！
Angularjs 创建可复用组件实例代码
10-21
在AngularJS中，创建可复用组件是一种提升代码效率和可维护性的重要方式。本教程将以创建一个名为“rn-stepper”的自定义步长选择Directive为例，深入讲解如何实现AngularJS中的可复用组件。 首先，理解AngularJS的...
js代码-javascript
07-16
对于`main.js`的使用者来说，`README.txt`可能会解释代码的工作原理、如何引入和使用这些JavaScript代码，以及可能存在的依赖项或配置要求。 在JavaScript中，有以下几个关键的知识点： 1. **变量和数据类型**：...
js代码-学习JavaScript
07-16
在压缩包中的`main.js`可能包含了实际的JavaScript代码示例，你可以通过查看或运行它来加深对这些概念的理解。`README.txt`通常包含关于代码的说明和使用指南，对于学习和理解代码也是很有帮助的。在学习JavaScript...
js代码-javascript 简易说明
07-16
JavaScript，简称JS，...在压缩包文件`main.js`中，很可能包含了实际的JavaScript代码示例。`README.txt`可能包含了代码的使用说明或开发者注释。通过阅读和理解这两个文件，你可以更深入地学习和实践JavaScript编程。
js模拟点击事件实现代码
12-11
html: 代码如下: <h3>请单击“提交”，测试提交按钮的单击事件也被触发了。</h3> <button id=”btn”>提交</button> <form action=”#” method=”get” id=”form”> <input type=”text” name=”site” value=”www.woiweb.net” readonly/> <input id=”subbtn” type=”submit” value=”先别点击此按钮提交” onclick=”alert(‘我已经提交了’);”/> </form> Javscript: 代码如下: <script ty
简单谈谈javascript代码复用模式
10-24
主要简单谈谈javascript代码复用模式，主要详细介绍了类式继承模式中的默认模式，希望大家能够喜欢。
js常用点击、鼠标、键盘事件--详解
合格程序猿
07-02 1904
JavaScript 提供了多种事件类型，包括点击事件、鼠标事件和键盘事件。您可以通过监听这些事件来响应用户的交互动作
JS事件详解
m0_71392708的博客
09-08 451
【代码】JS事件详解。
js点击事件
2302_76143886的博客
01-06 272
js中的点击事件（click）的实现方式
【JS 一行代码触发Button点击事件】
随性的豆干的博客
01-11 1万+
获取控件然后触发就行了，服务器控件一样有效 javascript: document.getElementById("ButttonID").click() jQuery: $("#ButttonID").click(); 如果按钮有js和后台两个按钮触发事件，且需要先触发js，等js结束了才执行后台的方法你还可以这样： HTML: <asp:Button runat="server" name="Button1" id="Button1" text="点我！" OnClientClick
使用js实现点击事件
a18792721831的博客
07-20 5826
这个项目实现一个页面上的3*3的格子，点击每个格子，改变其背景颜色。 效果如下： 1.首先在HTML文件的标签中创建一个表格，背景颜色是红色： ①使用css文件： 首先在WebRoot的文件夹下创建一个CSS文件夹，创建一个index.css文件 写入如下代码： td{ width:200px; height:200px; font-size: 25px;
JS点击进行展开和折叠的功能代码
热门推荐
qhdzj87的专栏
09-03 1万+
最近开发网站需要用到 一些网页前台特效。需要打开网页时部分内容默认隐藏（折叠），然后点击相应的文字或图片进行显示（展开），再点击进行隐藏（折叠）。网上查了资料，类似的代码很多，以下是三种可以实现此功能的代码： &lt;script&gt;  /*展开和收起用一个div,也可以说它是个按钮,假设它的id=d1;  假设需要显示和隐藏的div叫d2;  下面这段代码只是粗略的实现了你的要求,主要是给...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值