jQuery的一个变换class效果问题 - ITeye问答

问答首页 → Web前端技术

0 0

jQuery的一个变换class效果问题3

  $(document).ready(function() {
          $(".ball_r").click(
		     function(){
			    $(this).removeClass("ball_r");
				 $(this).addClass("ball_blue");
			 }
		  )
		  $(".ball_blue").click(
		     function(){
			    $(this).removeClass("ball_blue");
				 $(this).addClass("ball_r");
			 }
		  )
  });

意图就点击一次换一类（一共就两个类）,但是以上代码在未点击时还起作用，点击以后第二次点就没效果了，如何改进？
问题补充：
ball_blue和ball_r就是一个是BACKGROUND是红色，一个是蓝色，如果是红的就变蓝，如果是蓝的就变红,第一次点击时有效，但改变以后的再点就无效了。
问题补充：
用了上一站，火星的方法，浏览器直接挂掉。

2008年11月05日 18:44

malk
1
0 0 0

3个答案按时间排序按投票排序

0 0

采纳的答案

那用更简单点的方法，这样就可以了：

$(".ball_r").toggle(
		  function () {
			$(this).addClass("ball_blue");
		  },
		  function () {
			$(this).removeClass("ball_blue");
		  }
		);

2008年11月05日 19:40

上一站，火星
1034
0 0 0

添加评论

0 0

难道你试了我上面的代码不行？

2008年11月05日 19:02

上一站，火星
1034
0 0 0

添加评论

0 0

需要回调一下：

$(document).ready(function() {
    ball_r_click();
    ball_blue_click();
});

function ball_r_click() {
    $(".ball_r").click(function() {
        $(this).removeClass("ball_r");
        $(this).addClass("ball_blue");
    })
    ball_blue_click();
}

function ball_blue_click() {
    $(".ball_blue").click(function() {
        $(this).removeClass("ball_blue");
        $(this).addClass("ball_r");
    });
    ball_r_click();
}

2008年11月05日 18:52

上一站，火星
1034
0 0 0

添加评论

相关推荐

jQuery数字变换播放动画.zip: 在这个项目中，使用的版本是jquery-1.11.0.min.js，这是一个精简版的jQuery库，尽管体积小但包含了大部分核心功能。数字变换播放动画通常涉及到以下技术点： 1. **jQuery选择器**：jQuery提供了丰富的选择器，如...

【Jquery经典特效26】jQuery动画背景滑动切换效果: 【jQuery经典特效26】：jQuery动画背景滑动切换效果是一...文件列表中的`Jquery特效资源分享.txt`可能包含更多相关资源和代码示例，而`201`可能是另一个相关文件，如CSS或JavaScript文件，用于实现这个特效的具体细节。

jQuery全屏视差滚动效果: 8. **插件使用**：在提供的参考示例中，可能有一个现成的jQuery全屏视差滚动插件，使用前需要了解其配置选项和用法，通过`$("#your-element").parallax(options)`这样的方式初始化插件。 9. **自定义效果**：除了...

jQuery3d旋转翻书效果: 最后，压缩包中的"texiao657_1560680933"文件可能包含了一个实现jQuery3D翻书效果的示例代码或者资源文件。解压后，开发者可以通过查看和分析这些文件来学习和理解实际的实现过程。总之，jQuery3D旋转翻书效果是一...

Jquery翻书效果插件: 以下是一个简化的示例，展示了如何使用jQuery实现翻书效果： ```html <!DOCTYPE html> <title>jQuery翻书效果 .book { perspective: 1000px; } .page { position: relative; width: 100%; height: ...

jQuery实现炫彩文字特效效果插件: 例如，你可能在压缩包中找到了一些相关的资源，如"素材说明.txt"可能包含了特效的使用说明，"简素材-前端设计师精品素材大全.url"可能是提供此类插件的网站链接，而"jsucai.com"可能就是一个包含各种jQuery插件的...

左右翻页效果的jquery: 总之，“左右翻页效果的jquery”是一个利用jQuery实现的动态相册功能，它涉及到DOM操作、事件处理、动画制作等多个方面，通过巧妙的编程技巧，可以带给用户一种生动、互动的浏览体验。在实际开发中，我们需要结合...

jquery实现360度立方体3D旋转效果: 在本文中，我们将深入探讨如何使用jQuery来实现一个360度立方体3D旋转的效果。这个效果通常用于产品展示，使用户可以从各个角度查看物体，增强了交互性和视觉吸引力。以下是一些关键知识点： 1. **jQuery库**：...

jQuery添加背景动画效果插件.zip: 总结来说，"jQuery添加背景动画效果插件"是一个JavaScript工具，它允许开发者通过简单的jQuery调用在网页背景上实现丰富的动画效果。利用这个插件，可以提升网站的视觉效果和用户体验，同时降低了开发复杂动画的难度...

jquery实现的3D翻转效果: 本篇文章将详细讲解如何利用jQuery实现一个3D翻转效果，这种效果通常用于增加网页的交互性和视觉吸引力。首先，我们要明白这个3D翻转效果是基于CSS3的transform属性来实现的。CSS3的transform提供了rotateX、...

jQuery笔记本翻页效果.zip_jquery_thoughteh5_效果_笔记本翻页: 1. **HTML结构**：首先，我们需要创建一个代表页面的基本HTML结构，通常包括前后两页，每一页都是一个div元素，使用class或者id进行区分。 2. **CSS样式**：定义页面的基本样式，包括尺寸、背景色等，同时利用CSS3的...

Flip! A jQuery 3D 效果: jQuery 是一个广泛使用的 JavaScript 库，它简化了 JavaScript 的事件处理、DOM 操作和Ajax交互。jQuery 3D 效果则利用 CSS3 的变换（transform）和过渡（transition）属性，以及 jQuery 的强大功能，实现了平滑且...

jquery鼠标滑过随机图片变换特效_鼠标经过图片变换效果代码: 本教程将聚焦于一个特定的应用场景：使用jQuery实现鼠标滑过时图片随机变换的特效。这个特效能够为网站增加互动性和视觉吸引力。首先，我们需要理解jQuery中的核心概念。jQuery对象是库的核心，它封装了DOM元素，...

jQuery+css3 3d画廊房间效果: 本教程将深入探讨如何使用jQuery和CSS3实现一个3D画廊房间效果，该效果模拟了一个真实的艺术画廊，让用户仿佛置身于其中，可以自由地浏览各个墙面的美术作品。首先，我们来看一下关键的库和技术： **jQuery库** ...

jquery实现的图片的多种变换效果(附参数说明).zip: 在IT行业中，jQuery是一个非常流行的JavaScript库，它简化了HTML文档遍历、事件处理、动画制作和Ajax交互等任务。本资源"jquery实现的图片的多种变换效果(附参数说明).zip"显然聚焦于利用jQuery来实现图片的各种动态...

jQuery做的一款翻转切图效果: 接下来，我们将详细讨论这个效果背后涉及的技术和实现方法。首先，我们需要理解翻转切图的基本概念。翻转切图是一种视觉效果，通过CSS3的3D变换使图像或元素呈现出翻转的效果，通常用于展示更多信息或者进行动态...

康辉国际旅行社--简单实用Jquery杂志翻页效果: 在本项目中，“康辉国际旅行社--简单实用Jquery杂志翻页效果”是一个网页交互设计实例，它利用了JavaScript库jQuery来实现一种模拟实体杂志翻页的动态效果。这种效果可以使用户在浏览网页内容时获得更生动、更具沉浸...

JS/JQuery-第3章上机练习.zip: JavaScript 是一种轻量级的脚本语言，主要用于客户端的交互和动态效果实现，而 jQuery 是一个基于 JavaScript 的库，它简化了 JavaScript 的使用，使得操作 DOM（Document Object Model）、事件处理、动画制作以及 ...

jQuery简单动画变换效果实例分析: jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、...

Ask-but

我的问答 FAQ | 勋章

相关推荐

已解决问题

未解决问题

排行榜

查看全部排名>>

Global site tag (gtag.js) - Google Analytics