두 개의 onclick 함수 간 전환

Question

HTML에 두 개의 버튼을 만들었으며 사용자가 버튼 중 하나를 클릭하면 해당 버튼에 새 CSS 규칙이 적용되도록 일부 jQuery를 작성했습니다. 이 코드는 아래 작동합니다 #approve 클릭

$('#approve').on('click', function(){ 
    $('#approve:hover').css("background-color", "#24ce3a") 
    $('#approve:hover').css("color","#FFF") 
}); 
$('#reject').on('click', function(){ 
    $('#reject:hover').css("background-color", "#e32e10") 
    $('#reject:hover').css("color", "#FFF") 
}); 

경우, 나는 #reject 버튼을 한번 새로운 색상을주고 사용하지 않도록합니다. 다음에 #approve을 클릭하면 원래 스타일로 재설정하고 #reject 버튼을 다시 사용하고 싶습니다. #reject 버튼의 동작은 다음과 같습니다. 클릭하면 자신의 상태가 토글되고 활성화되어있는 동안에는 #approve 버튼이 비활성화됩니다.

어떻게하면이 아이디어를 얻을 수 있습니까?

Answer 1

콜백 함수 중 하나가 트리거되면 다른 클래스에 클래스를 추가하여 비활성화하십시오. 다음 번 클릭 할 때 클래스를 제거하여 버튼을 다시 사용하도록 설정합니다.

var approveFunc = function() { 
 
    if ($(this).is(".disabled")) { 
 
    return; 
 
    } 
 
    $(this).toggleClass("active"); 
 
    $("#reject").toggleClass("disabled"); 
 
}; 
 

 
var rejectFunc = function() { 
 
    if ($(this).is(".disabled")) { 
 
    return; 
 
    } 
 
    $(this).toggleClass("active"); 
 
    $("#approve").toggleClass("disabled"); 
 
}; 
 

 
$('#approve').on('click', approveFunc); 
 
$('#reject').on('click', rejectFunc);

div { 
 
    color: blue; 
 
    background-color: pink; 
 
} 
 
#approve.active { 
 
    background-color: #24ce3a; 
 
    color: #FFF; 
 
} 
 
#reject.active { 
 
    background-color: #e32e10; 
 
    color: #FFF; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="approve">Approve</div> 
 
<div id="reject">Reject</div>

Answer 2

마찬가지로 다른 접근 - Fiddle

$(document).on('click', 'button', function() { 
    if ($(".selected").length === 0 | $(this).hasClass("selected")) 
    { 
    $(this).toggleClass("selected"); 
    } 
}); 

대신 I 클래스 selected을 추가 한 인라인 CSS를 변경.

의견에서 언급 한 것처럼 원하지 않는 결과를 피하기 위해 selected 클래스의 요소 검사가 실제 마크 업에 따라 축소되어야합니다. 예 : 두 버튼 모두 id="testing"이있는 div에있는 경우 해당 요소 만 확인하려면 $("#testing .selected").length이 될 수 있습니다.