使用hasclass为多个div与一个按钮问题(using hasclass for multiple divs with one button Problems)
我试图根据旋转木马图像当时是否处于活动状态来更改div的显示属性。 我已经让它工作但它只有在我双击时才有效。 只需单击一下，即可显示与上一个活动图像对应的div，而不是当前活动图像。 请帮忙。
=====================================
代码如下
HTML
<div class="container-fluid" id="siteImgs"> <div class="row col-xs-12 col-md-7"> <div id="myCarousel" class="carousel slide" data-ride="carousel"> <!-- Carousel indicators --> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" id="lg" class="active"></li> <li data-target="#myCarousel" data-slide-to="1" id="ma"></li> <li data-target="#myCarousel" data-slide-to="2" id="sz"></li> <li data-target="#myCarousel" data-slide-to="3"id="ti"></li> </ol> <!-- Carousel items --> <div class="carousel-inner"> <div class="item active"> <img src="img/work/lookingGlass.png" alt="looking glass"> </div> <div class="item"> <img src="img/work/mauriceSite.png" alt="maurice site"> </div> <div class="item"> <img src="img/work/sza.png" alt="sza"> </div> <div class="item"> <img src="img/work/tina.png" alt="tina"> </div> </div> <!-- Carousel nav --> <a class="carousel-control left" href="#myCarousel" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="carousel-control right" href="#myCarousel" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div> </div> <!--INFORMATION DIVS--> <div class="row col-xs-12 col-md-5 lookingGlass lg"> <h1>THE LOOKING GLASS</h1> <p>Lorem ipsum</p> </div> <div class="row col-xs-12 col-md-5 lookingGlass ma"> <h1>MAURICEDANIELS.COM</h1> <p>Lorem ipsum</p> </div> <div class="row col-xs-12 col-md-5 lookingGlass sz"> <h1>SZA</h1> <p>Lorem ipsum</p> </div> <div class="row col-xs-12 col-md-5 lookingGlass ti"> <h1>TINA D. PHOTOGRAPHY</h1> <p>Lorem ipsum</p> </div>JS / JQUERY
$( '.ma' ).hide(); $( '.sz' ).hide(), $( '.ti' ).hide(); $( ".carousel-control" ).click(function() { if ( $( '#lg' ).hasClass( "active" ) ) { $( '.lg' ).show(), $( '.ma' ).hide(); $( '.sz' ).hide(), $( '.ti' ).hide(); } if ( $( '#ma' ).hasClass( "active" ) ) { $( '.ma' ).show(), $( '.lg' ).hide(); $( '.sz' ).hide(), $( '.ti' ).hide(); } if ( $( '#sz' ).hasClass( "active" ) ) { $( '.sz' ).show(), $( '.lg' ).hide(); $( '.ma' ).hide(), $( '.ti' ).hide(); } if ( $( '#ti' ).hasClass( "active" ) ) { $( '.ti' ).show(), $( '.lg' ).hide(); $( '.sz' ).hide(), $( '.ma' ).hide(); } });I am trying to change the display property of a div based on if the carousel image is active at the time. I have gotten it to work but it only works when i doubleclick. With a single click it displays the div corresponding to the previous active image instead of the current one. Please HELP.
=====================================
CODE BELOW
HTML
<div class="container-fluid" id="siteImgs"> <div class="row col-xs-12 col-md-7"> <div id="myCarousel" class="carousel slide" data-ride="carousel"> <!-- Carousel indicators --> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" id="lg" class="active"></li> <li data-target="#myCarousel" data-slide-to="1" id="ma"></li> <li data-target="#myCarousel" data-slide-to="2" id="sz"></li> <li data-target="#myCarousel" data-slide-to="3"id="ti"></li> </ol> <!-- Carousel items --> <div class="carousel-inner"> <div class="item active"> <img src="img/work/lookingGlass.png" alt="looking glass"> </div> <div class="item"> <img src="img/work/mauriceSite.png" alt="maurice site"> </div> <div class="item"> <img src="img/work/sza.png" alt="sza"> </div> <div class="item"> <img src="img/work/tina.png" alt="tina"> </div> </div> <!-- Carousel nav --> <a class="carousel-control left" href="#myCarousel" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="carousel-control right" href="#myCarousel" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div> </div> <!--INFORMATION DIVS--> <div class="row col-xs-12 col-md-5 lookingGlass lg"> <h1>THE LOOKING GLASS</h1> <p>Lorem ipsum</p> </div> <div class="row col-xs-12 col-md-5 lookingGlass ma"> <h1>MAURICEDANIELS.COM</h1> <p>Lorem ipsum</p> </div> <div class="row col-xs-12 col-md-5 lookingGlass sz"> <h1>SZA</h1> <p>Lorem ipsum</p> </div> <div class="row col-xs-12 col-md-5 lookingGlass ti"> <h1>TINA D. PHOTOGRAPHY</h1> <p>Lorem ipsum</p> </div>JS/JQUERY
$( '.ma' ).hide(); $( '.sz' ).hide(), $( '.ti' ).hide(); $( ".carousel-control" ).click(function() { if ( $( '#lg' ).hasClass( "active" ) ) { $( '.lg' ).show(), $( '.ma' ).hide(); $( '.sz' ).hide(), $( '.ti' ).hide(); } if ( $( '#ma' ).hasClass( "active" ) ) { $( '.ma' ).show(), $( '.lg' ).hide(); $( '.sz' ).hide(), $( '.ti' ).hide(); } if ( $( '#sz' ).hasClass( "active" ) ) { $( '.sz' ).show(), $( '.lg' ).hide(); $( '.ma' ).hide(), $( '.ti' ).hide(); } if ( $( '#ti' ).hasClass( "active" ) ) { $( '.ti' ).show(), $( '.lg' ).hide(); $( '.sz' ).hide(), $( '.ma' ).hide(); } });
原文：https://stackoverflow.com/questions/27744104
更新时间：2024-05-05 22:05
最满意答案
使用更干净的方法的示例代码：
// not all values present, just a sample here NSDictionary *stringsToSounds = @{@"friend":@"You're my best friend", @"hat are you doing":@"I'm talking to you", @"chips":@"chipds"}; NSDictionary *stringsToLabels = @{@"friend":@"You're my best friend", @"hat are you doing":@"I'm talking to you", @"chips":@"Ooooh. I love chips."}; for(NSString *s in stringsToSounds) { if([string rangeOfString:s] != NSNotFound) { if(stringsToLabels[s]) { [label setText:stringsToLabels[s]]; } [self playSound:stringsToSounds[s]]; break; } }和方法playSound看起来像：
-
(void) playSound(NSString *) soundFileName { SystemSoundID SoundID; NSString *soundfile= [[NSBundle mainBundle] pathForResource:soundFileName ofType:@"mp3"]; AudioServicesCreateSystemSoundID((__bridge CFURLRef)[NSURL fileURLWithPath:soundfile], &SoundID ); AudioServicesPlaySystemSound(SoundID); NSLog(@"sound played"); }Sample code using a cleaner approach:
// not all values present, just a sample here NSDictionary *stringsToSounds = @{@"friend":@"You're my best friend", @"hat are you doing":@"I'm talking to you", @"chips":@"chipds"}; NSDictionary *stringsToLabels = @{@"friend":@"You're my best friend", @"hat are you doing":@"I'm talking to you", @"chips":@"Ooooh. I love chips."}; for(NSString *s in stringsToSounds) { if([string rangeOfString:s] != NSNotFound) { if(stringsToLabels[s]) { [label setText:stringsToLabels[s]]; } [self playSound:stringsToSounds[s]]; break; } }and method playSound looks like:
-
(void) playSound(NSString *) soundFileName { SystemSoundID SoundID; NSString *soundfile= [[NSBundle mainBundle] pathForResource:soundFileName ofType:@"mp3"]; AudioServicesCreateSystemSoundID((__bridge CFURLRef)[NSURL fileURLWithPath:soundfile], &SoundID ); AudioServicesPlaySystemSound(SoundID); NSLog(@"sound played"); }
相关问答
更多-
NS 是什么意思[2023-11-27]
NS，全名NINTENDO SWITCH，是任天堂游戏公司于2017年3月首发的旗舰产品，主机采用家用机掌机一体化设计。新机不锁区，支持1920*1080电视输出和1280*720掌上输出。港版NS于2017年3月3日发售，台版NS于12月1日发售。 这是前社长岩田聪最后一部参与开发的硬件产品，该产品将成为未来任天堂娱乐事业蓝图的中心。NS首秀获得强烈反响，预告片YouTube首日播放量超一千万回，一度登顶YouTube播放榜首，风头压过美国大选。 -
无法忽略带有NS标志的mod_rewrite内部重定向(Unable to ignore mod_rewrite internal redirects with NS flag)[2022-04-13]
有几个解决方法，每个都有其优点和缺点。 作为免责声明，我只在.htaccess上下文中测试过它们。 解决方法1.检查空的REDIRECT_STATUS 添加RewriteCond检查以查看%{ENV:REDIRECT_STATUS}是否为空。 如果它是空的，那么当前请求不是内部重定向。 优点 确定内部重定向的最直接方式。 缺点 缺少文档。 自定义错误响应页面简要提到了这个变量： REDIRECT_环境变量是根据重定向之前存在的环境变量创建的。 它们被重命名为REDIRECT_前缀，即HTTP_USER_AG ... -
是什么导致Firefox中的NS_ERROR_STORAGE_CONSTRAINT？(What causes NS_ERROR_STORAGE_CONSTRAINT in Firefox?)[2022-01-15]
正如另一个答案所说，您的Firefox配置文件已损坏。 这是事实，但您不必放弃您的个人资料。 您必须在磁盘上找到您的配置文件并删除该配置文件中的webappsstore.sqlite 。 这将清除您保存的所有站点存储空间。 为了避免将来发生这种情况，请确保不要在Nightly / Developer Edition和稳定版本的Firefox之间混合使用相同的配置文件。 修复此问题的修补程序刚刚登陆，应该很快就可以使用。 Bugzilla Bug网址： https ：//bugzilla.mozilla.or ... -
NS前缀是什么意思？(What does the NS prefix mean?)[2022-12-04]
这是来自NeXTSTEP的遗产。 It's from the NeXTSTEP heritage. -
您需要为Azure虚拟机配置域所需的一切包括CNAME / A记录差异以及您需要在域名注册商网站上放置什么。 我添加Cloud Service链接的原因是，经典模式下的虚拟机（如果您创建了该VM）驻留在名为Cloud Service的特定实体中。 如果您创建了新的Azure VM，则可以使用Azure DNS服务或该方法。 因此，CNAME基本上是azure域的别名，您可能会看到第一个域。 使用A，域将映射到资源的IP地址而不是域。 选择取决于您的方案。 最简单的方法是配置CNAME，因为如果您配置A，您将 ...
-
使用更干净的方法的示例代码： // not all values present, just a sample here NSDictionary *stringsToSounds = @{@"friend":@"You're my best friend", @"hat are you doing":@"I'm talking to you", @"chips":@"chipds"}; NSDictionary *stringsToLabels = @{@"friend":@"You're my bes ...
-
在Noir源代码中查看此文件 。 这提供了一个处理异常的中间件 - wrap-exceptions和此文件中的代码使用:ns选项来解析异常并在具有以下内容的映射对象中获取堆栈跟踪数据:ns键。 Check out this file in Noir source code. This provides a middle ware to handle exceptions - wrap-exceptions and the code in this file uses :ns option to parse ...
-
ns-3源代码(ns-3 source code)[2024-03-11]
下面评论的源代码。 获取可以创建udp套接字的工厂类的唯一ID TypeId tid = TypeId::LookupByName ("ns3::UdpSocketFactory"); 实际上在节点“sinkNode”上创建一个udp套接字（无论是什么） PtrrecvSink = Socket::CreateSocket (c.Get (sinkNode), tid); 将我们刚刚创建的套接字绑定到“any”ipv4地址 InetSocketAddress local = InetS ... -
安装时出现NS3错误(NS3 error while installing)[2022-03-25]
我按照这个教程，它的工作： https ： //www.youtube.com/watch？v = 1N3CMrfxbG4 问题可能与先决条件有关。 我安装了它们，就像它在视频中提到的一样： sudo apt-get install gcc g++ python python-dev mercurial bzr gdb valgrind gsl-bin libgsl0-dev libgsl0ldbl flex bison tcpdump sqlite sqlite3 libsqlite3-dev libxm ... -
使用find('[nodeName="title"]').text()而不是find("\\:title, title").text() 但这适用于jquery 1.6，我想用jquery 1.7.1实现相同的功能 Used find('[nodeName="title"]').text() instead of find("\\:title, title").text() But this works with jquery 1.6, i want to achieve the same with jqu ...