jquery – 同一事件的两个独立处理程序

2019年7月20日 148次阅读

我使用’before’选择器为我的单选按钮设置’标签’标签样式.

我正在使用标记的“点击”事件使其可以在所有浏览器中点击(Chrome不支持点击之前/之后的元素).

现有的脚本将在单击单选按钮上显示/隐藏某些元素.

我想做什么

我正在编写一个关于标签’click’事件的脚本.现有的显示/隐藏功能无法正常工作,因为我在点击标签时尝试启动广播点击.

我需要的

我需要编写一个不会影响现有脚本(显示/隐藏)的脚本,它应该适用于所有浏览器.

我不能做什么

>我无法通过提供id和属性来完成它. 🙁
>我无法自定义现有脚本.

我认为我能做什么

>我可以通过任何其他方式修改HTML / CSS来设计我的收音机.但是有很多地方可以做些改变. 🙁
>使用“更改”事件而不是“点击”显示/隐藏div.

代码示例

/*what I'm trying...*/
$(document).ready(function(){
  $('input[type="radio"]+label').on('click',function(){
    $(this).prev().click();
  });
});

/*existing script*/
$('input[name="fieldname"]').click(function(){
  if($('#fieldid').is(':checked')){
    $('#divid').show();
    $('#divid1').hide();
  } else if($('#fieldid1').is(':checked')){
    $('#divid1').show();
    $('#divid').hide();
  }
});
/*existing script*/
.divs, input[type="radio"]{display:none;}

input[type="radio"]+label::before{
  content:" ";
  display:inline-block;
  position:relative;
  left:0;
  top:0;
  background:red;
  height:10px;
  width:10px;
  border-radius:50%;
}
input[type="radio"]:checked+label::before{
  background:blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<form>
  <input type="radio" name="fieldname" id="fieldid" class="fieldclass" />
  <label>show textfield</label>
  <input type="radio" name="fieldname" id="fieldid1" class="fieldclass" />
  <label>show button</label>
  <div id="divid" class="divs"><input type="text" size="30"></div>
  <div id="divid1" class="divs"><input type="submit" value="button"></div>
</form>

最佳答案 我有一个解决方案,但检查您是否可以在现有的点击事件代码之后放置它.基本上,我试图取消绑定现有的click事件并在另一个document.ready段中重写它.检查是否可能：

    $(document).ready(function(){
      // Unbind the existing click event
      $('input[name="fieldname"]').unbind( "click" );

      // if any label immediately after radio is clicked, call radio's click event
      $('input[type="radio"]').next('label').on('click',function(){
            $(this).prev('input[type="radio"]').click();
      });

      // radio is clicked
      // if the label next to radio says show textfield / show button
      // find the sibling div which has input of type this/that, and show/hide
      $('input[type="radio"]').on('click',function(){   
        /*if ($(this).next('label').html().trim().toLowerCase()=='show textfield') {
            $(this).siblings("div.divs").has('input[type="text"]').show();
            $(this).siblings("div.divs").has('input[type="submit"]').hide();        
        } else if ($(this).next('label').html().trim().toLowerCase()=='show button')    {
            $(this).siblings("div.divs").has('input[type="text"]').hide();
            $(this).siblings("div.divs").has('input[type="submit"]').show();
        }*/
        if ($(this).next('label').html().trim().toLowerCase()=='show textfield') {
            $(this).siblings("div.divs:eq(0)").show();
            $(this).siblings("div.divs:eq(1)").hide();      
        } else if ($(this).next('label').html().trim().toLowerCase()=='show button')    {
            $(this).siblings("div.divs:eq(0)").hide();
            $(this).siblings("div.divs:eq(1)").show();      
        }   

      }); /* end click */
    }); /* end doc.ready */

我已经在Firefox和Chrome中检查了这个,并且代码正在处理两者.

点赞