使用JS检查另一个元素的不透明度 [英] Checked changing opacity of another element using JS

问题描述

我试图在不同的手风琴展开时输入图片（在我的网页上）不透明度变化（输入：已勾选）。

这是相关网站： http://oasisexpressautowash.com/packages

你会看到，你的车辆正在接收：包菜单在左侧点亮，无论哪个包你徘徊。我试图让灯光打开时，他们匹配的手风琴选项卡扩大。

这是js（hoverfunctions.js），我正在修改以达到预期效果。

  jQuery（document）.ready（function（$）{jQuery（ul.container input＃ac-1）click（function（）{$（'img.top'）。css opacity：1.0}）; if（this.checked）{$（'＃mpactivator img.top'）。css（{opacity：0}）;} else {$（'img.top'）。css 1.0}）;}}）; jQuery（ul.container input＃ac-2）click（function（）{$（'img.top'）。css（{opacity：1.0}）; if （{opacity：0}）; $（'＃rainxactivator img.top'）css（{opacity：0}）; $（'＃packageactivator img。 top}）css（{opacity：0}）; $（'＃tireshineactivator img.top'）css（{opacity：0}）; $（'＃bpactivator img.top'）css }）; } else {$（'img.top'）。css（{opacity：1.0}）; }}）; jQuery（ul.container input＃ac-3）。click（function（）{$（'img.top'）。css（{opacity：1.0}）; if（this.checked）{$（'＃hotwaxactivator img.top'）css（{opacity：0}）; $（'＃rainxactivator img.top'）css（{opacity：0}）; $（'＃packageactivator img.top'）。css ：0}）; $（'＃tireshineactivator img.top'）css（{opacity：0}）; $（'＃bpactivator img.top'）。css（{opacity：0}）;} else {$ 'img.top'）。css（{opacity：1.0}）;}}）; jQuery（ul.container input＃ac-4）。click（function（）{$（'img.top'）。css（{opacity：1.0}）; if（this.checked）{$（'＃rainxactivator img.top'）。css（{opacity：0}）; $（'＃packageactivator img.top'）。css（{opacity：0}）; $（'＃tireshineactivator img.top'）。css ：0}）;} else {$（'img.top'）。css（{opacity：1.0}）;}}）; jQuery（ul.container input＃ac-5）。click（function（）{$（'img.top'）。css（{opacity：1.0}）;}）;}）;  
 

现在我试图保留JS正在接收菜单的css功能

现在，当您在展开手风琴后将光标悬停在按钮上时， t点亮。
在扩展了另一手风琴之后，来自之前扩展的手风琴的灯仍然亮起。

请帮助！

解决方案

jQuery （）.checked（）不是有效的事件处理程序。您应该使用 jQuery.click（）或 jQuery.change（）事件。

在更改事件中，您应该检查该元素是否已选中，然后采取适当的操作。

  jQuery（。chbd-ac-container input：nth-​​child（1））。click（function（）{
 if（this.checked）{
 $（'img.top' ）.css（{
 opacity：0 
}）; 
} else {
 $（'img.top'）。css（{
 opacity：1.0 
}）; 
} 
}）; 
  

I'm trying to make images' (on my webpage) opacity change when different accordions are expanded (input:checked).

This is the site in question: http://oasisexpressautowash.com/packages

You'll see that the "your vehicle is receiving: package menu" on the left lights up whichever package your hovering on. I am trying to make the lights come on when their matching accordion tab gets expanded.

This is the js (hoverfunctions.js) I'm tinkering with to achieve the desired effect.

jQuery(document).ready(function($) {
  jQuery("ul.container input#ac-1").click(function() {
    $('img.top').css({
      opacity: 1.0
    });
    if (this.checked) {
      $('#mpactivator img.top').css({
        opacity: 0
      });
    } else {
      $('img.top').css({
        opacity: 1.0
      });
    }
  });

  jQuery("ul.container input#ac-2").click(function() {
    $('img.top').css({
      opacity: 1.0
    });
    if (this.checked) {
      $('#lavaactivator img.top').css({
        opacity: 0
      });
      $('#rainxactivator img.top').css({
        opacity: 0
      });
      $('#packageactivator img.top').css({
        opacity: 0
      });
      $('#tireshineactivator img.top').css({
        opacity: 0
      });
      $('#bpactivator img.top').css({
        opacity: 0
      });
    } else {
      $('img.top').css({
        opacity: 1.0
      });
    }
  });

  jQuery("ul.container input#ac-3").click(function() {
    $('img.top').css({
      opacity: 1.0
    });
    if (this.checked) {
      $('#hotwaxactivator img.top').css({
        opacity: 0
      });
      $('#rainxactivator img.top').css({
        opacity: 0
      });
      $('#packageactivator img.top').css({
        opacity: 0
      });
      $('#tireshineactivator img.top').css({
        opacity: 0
      });
      $('#bpactivator img.top').css({
        opacity: 0
      });
    } else {
      $('img.top').css({
        opacity: 1.0
      });
    }
  });

  jQuery("ul.container input#ac-4").click(function() {
    $('img.top').css({
      opacity: 1.0
    });
    if (this.checked) {
      $('#rainxactivator img.top').css({
        opacity: 0
      });
      $('#packageactivator img.top').css({
        opacity: 0
      });
      $('#tireshineactivator img.top').css({
        opacity: 0
      });
    } else {
      $('img.top').css({
        opacity: 1.0
      });
    }
  });
  jQuery("ul.container input#ac-5").click(function() {
    $('img.top').css({
      opacity: 1.0
    });
  });

});

Now i'm trying to retain css functionality of packages you're receiving menu after JS is executed as well as get the opacity to return to its former value when another input is checked.

Now, when you hover over the buttons after expanding an accordion, they don't light up. And after you expand another accordion the lights from the previous expanded accordion remain lit.

Please help!

解决方案

jQuery().checked() is not a valid event handler. You should use the jQuery.click() or jQuery.change() event instead.

Inside the change event, you should check if the element is checked and then take appropriate action.

jQuery(".chbd-ac-container input:nth-child(1)").click(function() {
    if (this.checked) {
        $('img.top').css({
            opacity: 0
        });
    } else {
        $('img.top').css({
            opacity: 1.0
        });
    }
});

这篇关于使用JS检查另一个元素的不透明度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！