`
ThinkInMyLife
  • 浏览: 48799 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

JS-Class-Id小应用

阅读更多

一个js的应用,一个九宫格的位子选取方法,自己想的办法,虽然不是很优秀,要用的时候可以以备不时之需。

选取的页面HTML代码:

<div class="position"  style="display: none; position: absolute; top: 517px; left: 617.5px;">
    <ul class="area">
        <li class="" id="s-1"><a href="#" class="set-position" id="1" >左上</a></li>
        <li id="s-2"><a href="#" class="set-position" id="2" >中上</a></li>
        <li id="s-3"><a href="#" class="set-position" id="3" >右上</a></li>
        <li id="s-4"><a href="#" class="set-position" id="4" >左边</a></li>
        <li class="selected" id="s-5"><a href="#" class="set-position" id="5" >中间</a></li>
        <li id="s-6"><a href="#" class="set-position" id="6" >右边</a></li>
        <li id="s-7"><a href="#" class="set-position" id="7" >左下</a></li>
        <li id="s-8"><a href="#" class="set-position" id="8" >中下</a></li>
        <li id="s-9"><a href="#" class="set-position" id="9" >右下</a></li>
    </ul>
    <p class="submit"><button type="button" class="submit" id="chose-position">确定</button></p>
</div>

 js的监听方法:

var setPosition = D.getElementsByClassName('set-position');
    E.on(setPosition,'click',function(ev){
    	var newId = this.id;
    	//老的状态值通过class取,郁闷的是有两个,第二个才是:(
    	var oldId = D.getElementsByClassName('selected')
[2].id;
    	D.removeClass(oldId,'selected')
    	D.addClass('s-'+newId,'selected');
    	form.elements['position'].value = this.id;
    });

 

var oldId = D.getElementsByClassName('selected')[2].id;

应该写:

var oldId = D.getElementsByClassName('selected','li')[0].id;
效果会好些!

分享到:
评论

相关推荐

    前端项目-videojs-record.zip

    &lt;video id="my-video" class="video-js vjs-default-skin"&gt; var player = videojs('my-video', { controls: true, width: 320, height: 240, plugins: { record: { audio: true, video: true, maxLength...

    前端项目-videojs-overlay.zip

    &lt;video id="myPlayer" class="video-js vjs-default-skin"&gt; &lt;!-- 视频源 --&gt; &lt;script src="path/to/video.min.js"&gt; &lt;script src="path/to/videojs-overlay.js"&gt; var player = videojs('myPlayer', { ...

    videojs播放rtmp.rar

    &lt;video id="myPlayer" class="video-js vjs-default-skin" controls preload="auto" width="640" height="360" data-setup='{"techOrder": ["flash", "html5"]}'&gt; &lt;source src="rtmp://your.streaming.server/your...

    Laravel开发-laravel-js-routing

    在Laravel框架中,JavaScript路由(laravel-js-routing)是一个非常实用的功能,它允许你在前端JavaScript代码中直接访问后端定义的路由,从而实现前后端的无缝协作。这个功能尤其适用于那些采用SPA(单页应用)架构...

    js-css-tooltip是一款使用js和css3制作的tooltip工具提示插件

    `js-css-tooltip`是一个利用JavaScript和CSS3技术打造的高效、美观的Tooltip插件。这款插件不仅提供了丰富的自定义选项,还引入了CSS3动画效果,使得提示信息的展示更具吸引力和用户体验。 **一、核心功能** 1. **...

    posthtml-minify-classnames::envelope_with_arrow:重写HTML和CSS文件中的类名和ID以减小文件大小

    缩小类名可让您在源代码中编写冗长的类名,并将较小的包分发给用户或应用程序。 用例包括: 小型代码竞赛,例如 嵌入式设备,例如路由器管理面板,例如 移动和响应网站,以保持较低的延迟,例如 posthtml-...

    html css js网页制作实例-model-for-network-id开发笔记

    在这个“html css js网页制作实例-model-for-network-id开发笔记”中,我们将深入探讨这三个技术如何协同工作,特别是如何应用到网络ID的识别与处理。 HTML是网页的骨架,通过一系列标签来定义内容的结构,如`...

    添加class属性--互斥

    使用jQuery可以轻松地编写出功能强大的Web应用,而无需深入学习复杂的JavaScript语法。 #### 实现原理 在上述代码片段中,我们使用了jQuery的选择器和事件绑定方法来实现互斥性的功能。具体步骤如下: 1. **选择...

    EXT JS 3.0 Core Class Diagram

    EXT JS 3.0 Core Class Diagram 是一个关于EXT JS库核心类结构的图表,它展示了EXT JS 3.0版本中的主要组件和它们之间的关系。EXT JS是一个强大的JavaScript库,主要用于构建富客户端Web应用程序,其核心功能包括...

    videoJs+ hlive JS实现m3u8格式播放

    &lt;video id="myPlayer" class="video-js vjs-default-skin" controls preload="auto" width="640" height="264" data-setup='{}'&gt; &lt;source src="your-m3u8-url.m3u8" type="application/x-mpegURL"&gt; ``` 在上述...

    Assignment-Tanvir-class-11-

    总的来说,"Assignment-Tanvir-class-11-"这个作业涵盖了HTML的基础结构、语义化标签的使用、与CSS和JavaScript的结合应用等多个关键知识点。通过这个练习,Tanvir将能够掌握创建静态网页的基本技能,并为未来学习更...

    spring-3.0-应用springmvc-构造RESTful-URL-详细讲解

    &lt;servlet-class&gt;org.springframework.web.servlet.DispatcherServlet&lt;/servlet-class&gt; &lt;load-on-startup&gt;1&lt;/load-on-startup&gt; ``` 3. 处理浏览器不支持的HTTP方法(PUT、DELETE) 由于浏览器的HTML `&lt;form&gt;`...

    js的中国农历-农历-日历

    JavaScript(简称JS)是一种广泛用于网页和网络应用的编程语言,尤其在客户端脚本编写方面极为常见。在本文中,我们将深入探讨如何使用JavaScript来实现中国农历的功能,以及创建一个美观、清爽的日历界面。 首先,...

    jquery-1.9.1.js 、jquery-1.9.1.min.js 【官方jquery包 js】

    选择器是jQuery的精髓,它极大地简化了CSS选择器的使用,如`$("#id")`用于选取ID为`id`的元素,`$(".class")`用于选取所有class为`class`的元素。DOM操作则允许我们方便地添加、删除和修改元素,如`$(element).html...

    HTML-JS-CSS技术手册

    CSS选择器用于定位HTML元素,如`#id`选择具有特定ID的元素,`.class`选择所有具有特定类的元素,`tag`选择所有特定标签的元素。CSS3引入了更多的样式和布局功能,如伪类、过渡、动画、媒体查询等,使网页设计更加...

    bootstrap-datetimepicker时间控件使用小demo

    接下来,我们需要创建一个用于显示日期和时间选择器的输入框,并为其添加一个ID以便于后续JavaScript操作: ```html &lt;div class="container"&gt; &lt;div class="row"&gt; &lt;div class='col-sm-6'&gt; &lt;div class="form-group...

    jquery-1.11.1.js 、jquery-1.11.1.min.js 【官方jquery包 js】

    `selector`可以是CSS选择器,如`$("#id")`选取ID为`id`的元素,`$(".class")`选取所有class为`class`的元素。 - `$(element).html()`:获取或设置元素的HTML内容。 - `$(element).append()`/`.prepend()`:在元素...

    video-js Flah在线播放器

    &lt;video id="my-video" class="video-js" controls preload="auto" width="640" height="264" data-setup='{"example_option": true}'&gt; ``` 在上面的代码中,`data-setup`属性用于传递配置选项,`&lt;source&gt;`...

    Videojs开源HTML5和Flash视频播放器

    &lt;video id="my-video" class="video-js" controls preload="auto" width="640" height="264" data-setup='{}'&gt; &lt;source src="my-video.mp4" type='video/mp4'&gt; &lt;source src="my-video.webm" type='video/webm'&gt; ...

    Node.js-基于ExpressMongodbjQueryBootstrap搭建个人网站系统

    &lt;div class="collapse navbar-collapse" id="navbarSupportedContent"&gt; &lt;ul class="navbar-nav mr-auto"&gt; &lt;li class="nav-item active"&gt; &lt;a class="nav-link" href="#"&gt;首页 &lt;span class="sr-only"&gt;(current)...

Global site tag (gtag.js) - Google Analytics