相同事件的兩個單獨處理程序

Question

我使用'之前'選擇器爲'我'單選按鈕'標籤'標籤樣式。 我對標籤使用'click'事件來使所有瀏覽器的點擊都可以點擊（chrome不支持點擊之前/之後的元素）。 有一個現有的腳本，它將顯示/隱藏單擊單選按鈕上的某些元素。

我試圖做

我寫上「點擊」標貼的事件的腳本。現有的顯示/隱藏功能無法正常工作，因爲我試圖在點擊標籤時啓動無線點擊。

我需要什麼

我需要編寫一個腳本，應該不會影響現有的腳本（顯示/隱藏），它應該在所有的瀏覽器。

我不能做什麼

1. 我不能簡單地通過給ID和屬性，完成它。 :(
2. 我無法自定義現有的腳本。

我想我能做到

1. 我可以修改HTML/CSS通過任何其他方式來設計我的收音機。但是，有很多地方做的改變。:(
2. 使用「變」事件而不是「點擊」的顯示/隱藏的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>

Answer 1

我有一個解決方案，但請檢查您是否可以把這個在現有的點擊事件代碼之後。基本上，我試圖解除現有的點擊事件並將其重寫爲另一個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中檢查了這一點，並且代碼在兩者上都有效。

Answer 2

既然你不允許編輯現有的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>