Jquery - 子 div 上的事件侦听器以更改父 div 的 css 属性

Posted 2023-05-09

【中文标题】Jquery - 子 div 上的事件侦听器以更改父 div 的 css 属性

【英文标题】：Jquery - Event Listener on child div to change css property of parent div

【发布时间】：2017-03-07 10:10:21

【问题描述】：

我正在构建一个产品定制表单，单选按钮以 opacity:0 隐藏。

我希望图像的边框变黑，以向用户反馈选择了该选项。我已将事件侦听器添加到单选按钮，以便在获得焦点时，它会更改父 div 的 css 属性作为对用户的反馈。 它在 chrome 和 jsfiddle 中完美运行，但不适用于移动或 safari 浏览器。

为什么会发生这种情况以及解决方法是什么。

这是 jsfiddle https://jsfiddle.net/gLwjhqtd/

 $('.radioButtons')
    .focus(function() 
      $(this).parent().css('border','2px solid black');
    )
    .blur(function() 
      $(this).parent().css('border','none');
    )  

谢谢！

【问题讨论】：

这可能与focus 和blur 事件有关。我不确定它们在移动浏览器上的工作方式是否符合您的预期（在radio 按钮的上下文中）。您可以在change 上设置一个侦听器，如果设置了收音机，则显示边框，否则将其删除。

【参考方案1】：

不要使用模糊或焦点，因为在移动设备中它们不会发生。 你可以试试这个

$('.radioButtons').change(function(event)
    $('.radioButtons').parent().css('border','0');
    if($(event.target).is(':checked'))
  
    $(event.target).parent().css('border','2px solid black');
  

)