切换 class 除了被点击的其他 div

Question

一个网站上有几个links/images。当您单击 link/image 时，我会弹出一个框。现在另一个 links/images 应该“变暗”，而单击的那个应该保持不变。目前我有以下脚本：

HTML 盒子内容

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

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

HTML 链接

<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();
});

这可行，但很可能（我是新手）不好而且太“复杂”。我怎样才能简化这个？

跟进：如果没有 javascript 而仅 css 是否也可以实现？与 https://jsfiddle.net/wcvtesor/ 相似，但具有上述“特征”

Answer 1

我实际上想做什么我没有得到你的问题但是使用 data-x 作为目标内容框和这个指针你可以很容易地解决你的问题。

$(function(){
$('.linkid1').click(function(e){
  var $parent=$(this).closest('.container');  
$('.container').not($parent).toggleClass('dim');
    $('#'+$(this).attr('data-target')).toggle();
});

});

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="boxid1" class="modal-box">
 Content Box 1
</div>

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

<div class="container">
 Content 2
 <a data-target="boxid2" class="linkid1">Test</a>
</div>

Answer 2

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

如果它适合您，那么它还不错或复杂。可能有改进的余地，但几乎总是如此 ;)

How can I streamline this?

您可以使用与被单击元素相关的事件处理程序。

为此，我们还必须对 .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>

我们将相关 .modal 的 ID 存储在容器的 data-* 属性中。我们也不再需要 classes a 和 b 用于不同的容器，也不再需要 class 用于 <a> 元素。

然后我们可以将事件处理程序修改为：

$(".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
});

全部合并：

$(".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>

切换 class 除了被点击的其他 div

Toogle class of other divs except the one clicked

css

jquery

toggle