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

Question

我使用 'before' 选择器使用 'label' 标签为我的单选按钮设置样式。我正在为标签使用 'click' 事件以使其在所有浏览器中都可点击（chrome 不支持 before/after 元素点击）。有一个现有脚本可以 show/hide 单击单选按钮时的一些元素。

我想做什么

我正在为标签的 'click' 事件编写脚本。现有 show/hide 功能无法正常工作，因为我在点击标签时尝试启动单选按钮点击。

我需要的

我需要编写一个不应影响现有脚本的脚本 (show/hide)，并且它应该适用于所有浏览器。

我不能做什么

我不能简单地给id和for属性来完成它。 :(
我无法自定义现有脚本。

我认为我能做到的

我可以修改 HTML/CSS 以通过任何其他方式设计我的收音机。但是有很多地方可以做改变。 :(
对 show/hide 个 div 使用 "change" 事件而不是 "click"。

代码示例

/*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>

Answer 1

由于您不能编辑现有的 JS，因此您也不必向其中添加任何额外的 JS。

只需将您的标题包装成 <span>
并且 <span> 和 <input> 都进入您的 <label> 元素：

/* ABSOLUTELY NO NEED TO ADD ANYTHING */

/*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;}

/* SIMPLY CHANGE `label` to `span` and you're done! */
input[type="radio"]+span::before{
  content:" ";
  display:inline-block;
  position:relative;
  left:0;
  top:0;
  background:red;
  height:10px;
  width:10px;
  border-radius:50%;
}
input[type="radio"]:checked+span::before{
  background:blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- Wrap INPUT and the new SPAN into LABEL -->

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

Answer 2

我有一个解决方案，但请检查您是否可以将其放在现有的点击事件代码之后。基本上，我试图解除绑定现有的点击事件并将其重写在另一个 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 中检查过了，并且代码在两者上都有效。

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

Two separate handlers for same event

jquery

styling

radio-button

jquery-events