在多个图像之间切换

Question

我有 4 张黑色、红色、橙色和绿色的图像 - 以及灰色的禁用版本。 我想要实现的是，当我点击一个禁用的图像时，其他图像应该变成灰色/禁用，而被点击的图像应该变成他的彩色图像。

我现在尝试跟随这将获得他的子 div 并将对单击的图像执行切换技巧，但它不会禁用其他的。 我怎样才能禁用所有其他的？

 $('.toggle').each(function() { var clickCounter = 0, firstEdit = false; $(this).on('click', function() { clickCounter++; if (clickCounter == 1 || firstEdit == true) { $(this).toggle(); $(this).next('.toggled').toggle(); clickCounter = 0; firstEdit = true; } }); }); $('.toggled').on('click', function() { $(this).toggle(); $(this).prev('.toggle').toggle(); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script> <div class="toggle"><img class="" src="data/img/controller/orange.jpg"></div> <div class="toggled"><img class="" src="data/img/controller/orange_disabled.jpg"></div> <div class="toggle"><img class="" src="data/img/controller/red.jpg"></div> <div class="toggled"><img class="" src="data/img/controller/red_disabled.jpg"></div> <div class="toggle"><img class="" src="data/img/controller/black.jpg"></div> <div class="toggled"><img class="" src="data/img/controller/black_disabled.jpg"></div> <div class="toggle"><img class="" src="data/img/controller/green.jpg"></div> <div class="toggled"><img class="" src="data/img/controller/green_disabled.jpg"></div>

Answer 1

您需要遍历 onclick 事件处理程序中的所有图像，并在每个图像上设置正确的 class。 另请注意，您可以使用简单的 css 过滤器使图像看起来呈灰色，不需要创建单独的图像

 const test = document.getElementById("test"); test.addEventListener("click", e => { for(let i = 0, children = test.children; i < children.length; i++) { children[i].classList.toggle("selected", children[i] === e.target); } });

 .content > img:not(.selected) { filter: saturate(0); opacity: 0.5; }

 <span id="test" class="content"> <img src="https://lh3.googleusercontent.com/IlhDxQVsR17dwwER5xYZJej867KrdSx0K5eyRP2RFP4eQJMD2pi0ZGBhrMOcajBUP9M54lpmIr90JecPUFGPaRe3sDZ82RvHBSw1rw-YJvQs7J8K3g=w102-h68-n-l50-sg-rj"> <img src="https://lh3.googleusercontent.com/taykG37GWDgY-FGkdogDvsHSJMUGRMvkuVRT6yR-5UNkKvGRKeRlpGYXlslocOcS0txlfUdGW59JGtzADknxbMqnh6AtVCv9EXyB8nHp80YsRNA0Yw=w102-h68-n-l50-sg-rj"> <img src="https://lh3.googleusercontent.com/aS2Up3osDMLTua1vXPTqnXko13KbIAmB0nQ44AP_IFTEt-VjUa6Tz2MC9jdH11bsZfjdiR8z4HbnxvhmmxSU1swKrtjc5PXreP6i=w102-h68-n-l50-sg-rj"> <img src="https://lh3.googleusercontent.com/dTH5_J82_TqXaLW_Hzq1rbMVqfzRWG9PkcKgHdjXphAy9M4MZF5Q7_cQZeM1kbqEYMysrBLlY4szACDZwIbP7Jm17BnGNjT0Tht8Qw=w102-h68-n-l50-sg-rj"> </span>

聚苯乙烯

请不要使用英国媒体报道软件 jquery，保存 pl.net。

Answer 2

动态内容委托

jQuery版

将 toggleClass 更改为 addClass 以不切换单击的图像

 $('#container').on('click', 'img', function() { $(this).siblings().each(function() { $(this).removeClass('selected') }); $(this).toggleClass('selected') });

 .content>img:not(.selected) { filter: saturate(0); opacity: 0.5; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="container"> <div class="content"> <img src="https://lh3.googleusercontent.com/IlhDxQVsR17dwwER5xYZJej867KrdSx0K5eyRP2RFP4eQJMD2pi0ZGBhrMOcajBUP9M54lpmIr90JecPUFGPaRe3sDZ82RvHBSw1rw-YJvQs7J8K3g=w102-h68-n-l50-sg-rj"> <img src="https://lh3.googleusercontent.com/taykG37GWDgY-FGkdogDvsHSJMUGRMvkuVRT6yR-5UNkKvGRKeRlpGYXlslocOcS0txlfUdGW59JGtzADknxbMqnh6AtVCv9EXyB8nHp80YsRNA0Yw=w102-h68-n-l50-sg-rj"> <img src="https://lh3.googleusercontent.com/aS2Up3osDMLTua1vXPTqnXko13KbIAmB0nQ44AP_IFTEt-VjUa6Tz2MC9jdH11bsZfjdiR8z4HbnxvhmmxSU1swKrtjc5PXreP6i=w102-h68-n-l50-sg-rj"> <img src="https://lh3.googleusercontent.com/dTH5_J82_TqXaLW_Hzq1rbMVqfzRWG9PkcKgHdjXphAy9M4MZF5Q7_cQZeM1kbqEYMysrBLlY4szACDZwIbP7Jm17BnGNjT0Tht8Qw=w102-h68-n-l50-sg-rj"> </div> <div class="content"> <img src="https://lh3.googleusercontent.com/IlhDxQVsR17dwwER5xYZJej867KrdSx0K5eyRP2RFP4eQJMD2pi0ZGBhrMOcajBUP9M54lpmIr90JecPUFGPaRe3sDZ82RvHBSw1rw-YJvQs7J8K3g=w102-h68-n-l50-sg-rj"> <img src="https://lh3.googleusercontent.com/taykG37GWDgY-FGkdogDvsHSJMUGRMvkuVRT6yR-5UNkKvGRKeRlpGYXlslocOcS0txlfUdGW59JGtzADknxbMqnh6AtVCv9EXyB8nHp80YsRNA0Yw=w102-h68-n-l50-sg-rj"> <img src="https://lh3.googleusercontent.com/aS2Up3osDMLTua1vXPTqnXko13KbIAmB0nQ44AP_IFTEt-VjUa6Tz2MC9jdH11bsZfjdiR8z4HbnxvhmmxSU1swKrtjc5PXreP6i=w102-h68-n-l50-sg-rj"> <img src="https://lh3.googleusercontent.com/dTH5_J82_TqXaLW_Hzq1rbMVqfzRWG9PkcKgHdjXphAy9M4MZF5Q7_cQZeM1kbqEYMysrBLlY4szACDZwIbP7Jm17BnGNjT0Tht8Qw=w102-h68-n-l50-sg-rj"> </div> </div>

香草 - 它不会切换点击的图像

 const container = document.getElementById('container'); container.addEventListener('click', e => { const tgt = e.target; if (.tgt;matches('img')) return. const images = tgt.closest('.content');querySelectorAll('img'). images.forEach(img => img.classList,toggle('selected'; img === tgt)); });

 .content>img:not(.selected) { filter: saturate(0); opacity: 0.5; }

 <div id="container"> <div class="content"> <img src="https://lh3.googleusercontent.com/IlhDxQVsR17dwwER5xYZJej867KrdSx0K5eyRP2RFP4eQJMD2pi0ZGBhrMOcajBUP9M54lpmIr90JecPUFGPaRe3sDZ82RvHBSw1rw-YJvQs7J8K3g=w102-h68-n-l50-sg-rj"> <img src="https://lh3.googleusercontent.com/taykG37GWDgY-FGkdogDvsHSJMUGRMvkuVRT6yR-5UNkKvGRKeRlpGYXlslocOcS0txlfUdGW59JGtzADknxbMqnh6AtVCv9EXyB8nHp80YsRNA0Yw=w102-h68-n-l50-sg-rj"> <img src="https://lh3.googleusercontent.com/aS2Up3osDMLTua1vXPTqnXko13KbIAmB0nQ44AP_IFTEt-VjUa6Tz2MC9jdH11bsZfjdiR8z4HbnxvhmmxSU1swKrtjc5PXreP6i=w102-h68-n-l50-sg-rj"> <img src="https://lh3.googleusercontent.com/dTH5_J82_TqXaLW_Hzq1rbMVqfzRWG9PkcKgHdjXphAy9M4MZF5Q7_cQZeM1kbqEYMysrBLlY4szACDZwIbP7Jm17BnGNjT0Tht8Qw=w102-h68-n-l50-sg-rj"> </div> <div class="content"> <img src="https://lh3.googleusercontent.com/IlhDxQVsR17dwwER5xYZJej867KrdSx0K5eyRP2RFP4eQJMD2pi0ZGBhrMOcajBUP9M54lpmIr90JecPUFGPaRe3sDZ82RvHBSw1rw-YJvQs7J8K3g=w102-h68-n-l50-sg-rj"> <img src="https://lh3.googleusercontent.com/taykG37GWDgY-FGkdogDvsHSJMUGRMvkuVRT6yR-5UNkKvGRKeRlpGYXlslocOcS0txlfUdGW59JGtzADknxbMqnh6AtVCv9EXyB8nHp80YsRNA0Yw=w102-h68-n-l50-sg-rj"> <img src="https://lh3.googleusercontent.com/aS2Up3osDMLTua1vXPTqnXko13KbIAmB0nQ44AP_IFTEt-VjUa6Tz2MC9jdH11bsZfjdiR8z4HbnxvhmmxSU1swKrtjc5PXreP6i=w102-h68-n-l50-sg-rj"> <img src="https://lh3.googleusercontent.com/dTH5_J82_TqXaLW_Hzq1rbMVqfzRWG9PkcKgHdjXphAy9M4MZF5Q7_cQZeM1kbqEYMysrBLlY4szACDZwIbP7Jm17BnGNjT0Tht8Qw=w102-h68-n-l50-sg-rj"> </div> </div>