[英]jquery mutually exclusive click
I have 3 divs with 2 possible image tags for each (active or inactive). 我有3个div,每个都有2个可能的图像标签(有效或无效)。 If one div is clicked to be active the other divs must be set to inactive.
如果单击一个div使其处于活动状态,则其他div必须设置为非活动状态。 How do I accomplish this with img tags and what happens if user has javascript disable?
如何使用img标签完成此操作,如果用户禁用了javascript会发生什么情况?
Do you mean something like this? 你的意思是这样吗?
<div class="block" id="block1">
<img src='inactive_block1.jpg'>
</div>
<div class="block" id="block2">
<img src='inactive_block2.jpg'>
</div>
<div class="block" id="block3">
<img src='inactive_block3.jpg'>
</div>
Using a library like jQuery , the javascript would look like: 使用类似jQuery的库,JavaScript如下所示:
$(function() {
$('.block').click(function() {
$('#block1').find('img').attr('src', 'inactive_block1.jpg');
$('#block2').find('img').attr('src', 'inactive_block2.jpg');
$('#block3').find('img').attr('src', 'inactive_block3.jpg');
$(this).find('img').attr('src', 'active_' + $(this).attr('id') + '.jpg');
});
});
With the above, if you have inactive_block1.jpg
, inactive_block2.jpg
, inactive_block3.jpg
and active_block1.jpg
, active_block2.jpg
and active_block3.jpg
you should get what you want. 使用上面的方法,如果您具有
inactive_block1.jpg
, inactive_block2.jpg
, inactive_block3.jpg
和active_block1.jpg
, active_block2.jpg
和active_block3.jpg
您应该得到想要的东西。
It's up to you whether its worth it or not to have javascript disabled fallbacks, mostly depending on whether you expect a large amount of your audience to have javascript disabled. 禁用javascript后备广告是否值得决定,这主要取决于您是否希望大量受众禁用javascript。
if a user has JavaScript disabled, there is nothing you can do that is JavaScript-based to deal with dynamically modifying the page. 如果用户禁用了JavaScript,则无法执行基于JavaScript的处理动态修改页面的操作。 The only other option you have is to create a "deprecated" version of your functionality that requires a page request after each click.
您唯一的其他选择是创建功能的“不建议使用”版本,每次单击后都需要页面请求。
I would recommend researching how to dynamically add/remove classes from elements in the DOM, that is how I would approach this problem. 我建议研究如何从DOM中的元素动态添加/删除类,这就是我要解决的问题。 You could easily do a jQuery select for all elements who are "active" on click and set a "disabled" class on them, that way you are essentially blacking out everything except the element you've clicked.
您可以轻松地对单击时处于“活动”状态的所有元素执行jQuery选择,并在其上设置“禁用”类,这样就实质上使除了单击的元素之外的所有内容都变黑了。
Does that make sense? 那有意义吗?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.