检查使用JS更改另一个元素的不透明度

Question

我正在尝试制作图像'（在我的网页上）不同的手风琴扩展时的不透明度变化（输入：选中）。

这是相关网站：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({
        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
    });
  });

});

现在我正在尝试在执行JS后保留您正在接收菜单的软件包的css功能，并且在检查另一个输入时获得不透明度以返回其以前的值。

现在，当您在展开手风琴后将鼠标悬停在按钮上时，它们不会亮起。 在您扩展另一支手风琴之后，之前扩展的手风琴的灯仍然亮着。

请帮忙！

Answer 1

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