除了被点击的其他 div 的 Toogle 类 [英] Toogle class of other divs except the one clicked

查看：28
本文介绍了除了被点击的其他 div 的 Toogle 类的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

网站上有多个链接/图片.当您单击链接/图像时，我有一个弹出框.现在其他链接/图像应该变暗"而点击应该保持不变.目前我有以下脚本:

HTML 框内容

内容框 1
<div id="boxid2";class="modal-box">内容框 2

HTML 链接

内容<a class="linkid1">Test</a>
<div class="container b">内容<a class="linkid1">Test</a>

CSS

.modal-box { display: none;}.dim { 背景:蓝色；}

$('.linkid1').click(function(e){$('.container').not('.a').toggleClass('dim');$('#boxid1').toggle();});$('.linkid2').click(function(e){$('.container').not('.b').toggleClass('dim');$('#boxid2').toggle();});

这行得通，但很可能(我是新手)很糟糕，而且太复杂"了.我该如何简化它?

跟进:这是否也可以在没有 javascript 和 css 的情况下实现?像 https://jsfiddle.net/wcvtesor/ 但具有功能"如上所述

解决方案

这行得通，但很可能(我是新手)很糟糕，而且太复杂"了

如果它对你有用，那么它并不坏或复杂.可能还有改进的余地，但这几乎总是如此 ;)

<块引用>

我该如何简化它?

您可以使用与点击元素相关的事件处理程序.

为此，我们还必须对 .containers 进行一些小的更改:

<div class="container";data-modal-id="boxid2">内容二<a>测试2</a>

我们将相关 .modal 的 id 存储在容器的 data-* 属性中.我们也不再需要不同容器的 a 和 b 类，也不再需要 元素的类.

有了这个，我们就可以将事件处理程序修改为:

$(".container a").on("click", function() {const container = $(this).closest(".container"),//当前容器modalId = container.data(modal-id");//此容器的模态 ID$(".container").not(container)//选择所有 .container 并删除当前的.toggleClass("dim");//切换剩余容器上的类$("#" + modalId).toggle();//切换模态});

全部合并:

$(".container a").on("click", function() {const container = $(this).closest(".container"),modalId = container.data("modal-id");$(".container").not(container).toggleClass("dim");$("#" + modalId).toggle();});

.modal-box { display: none;}.dim { 背景:蓝色；白颜色;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="container" data-modal-id="boxid1">内容一<a>测试1</a>

<div class="container" data-modal-id="boxid2">内容二<a>测试2</a>

<div id="boxid1" class="modal-box">内容框 1

<div id="boxid2" class="modal-box">内容框 2

There are several links/images on a website. I have a box that popups when you click on a link/image. Now the other links/images should "dim out" while the one clicked should stay the same. Currently I have following script:

HTML Boxcontent

<div id="boxid1" class="modal-box">
 Content Box 1
</div>

<div id="boxid2" class="modal-box">
 Content Box 2
</div>

HTML Links

<div class="container a">
 Content
 <a class="linkid1">Test</a>
</div>

<div class="container b">
 Content
 <a class="linkid1">Test</a>
</div>

CSS

.modal-box { display: none; }
.dim { background: blue; }


$('.linkid1').click(function(e){
    $('.container').not('.a').toggleClass('dim');
    $('#boxid1').toggle();
});

$('.linkid2').click(function(e){
    $('.container').not('.b').toggleClass('dim');
    $('#boxid2').toggle();
});

This works but very possibly (I'm a novice) is bad and too "complicated". How can I streamline this?

Follow Up: Would this also be possible to achieve without javascript and just css? Like https://jsfiddle.net/wcvtesor/ but with the "features" described above

解决方案

This works but very possibly (I'm a novice) is bad and too "complicated"

If it works for you then it's not bad or complicated. There might be room for improvement but this is almost always the case ;)

How can I streamline this?

You could use an event handler that works relative to the clicked element.

For this we would also have to make a small change on the .containers:

<div class="container" data-modal-id="boxid1">
 Content 1
 <a>Test 1</a>
</div>
<div class="container" data-modal-id="boxid2">
 Content 2
 <a>Test 2</a>
</div>

We store the id of the related .modal in a data-* attribute on the container. We also no longer need the classes a and b for the different containers, nor the class for the <a> element.

With this we then can modify the event handler into this:

$(".container a").on("click", function() {
  const container = $(this).closest(".container"), // the current container
        modalId = container.data("modal-id");      // the id of the modal for this container

  $(".container").not(container)       // select all .container and remove the current one
                 .toggleClass("dim");  // toggle the class on the remaining containers

  $("#" + modalId).toggle();           // toggle the modal
});

All combined:

$(".container a").on("click", function() {
  const container = $(this).closest(".container"),
        modalId = container.data("modal-id");

  $(".container").not(container).toggleClass("dim");
  
  $("#" + modalId).toggle();
});

.modal-box { display: none; }
.dim { background: blue; color: white; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container" data-modal-id="boxid1">
 Content 1
 <a>Test 1</a>
</div>
<div class="container" data-modal-id="boxid2">
 Content 2
 <a>Test 2</a>
</div>

<div id="boxid1" class="modal-box">
 Content Box 1
</div>
<div id="boxid2" class="modal-box">
 Content Box 2
</div>

这篇关于除了被点击的其他 div 的 Toogle 类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆