Toogle class of other divs except the one clicked

问题

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

回答1:

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>

回答2:

What actually wants to do I did not get your problems but using data-x for target content box and this pointer you can easily solve your problem.

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

来源：https://stackoverflow.com/questions/63087636/toogle-class-of-other-divs-except-the-one-clicked

标签

jquery

css

toggle