스크립트에 더 많은 하위 항목 추가

Question

두 개의 버튼으로 작동하는 멋진 스크립트가 있습니다. 총 5 가지 옵션에 3 가지 버튼을 더 추가해야합니다.

전체 스크립트를 다시 작성해야합니까, 아니면 더 많은 DIV 클래스를 추가 할 수 있습니까? 승인하는 방법을 모릅니다. http://jsfiddle.net/9cr4F/9/

HTML :

<div id="r6">  

<div class="bx bx1">6</div> 
<div id="sp"></div> 
<div class="bx bx2">Gender</div> 
<div id="sp"></div> 
<div id="bxGender"> 
<input type="button" class="gnM" > 
<div id="sp"></div> 
<input type="button" class="gnF"> 
<div id="sp"></div> 
<input class="req-string gender" id="gender" name="gender"></div> 

</div> 

CSS :

#r6 { 
    font-family: Verdana, Arial, Helvetica, sans-serif; 
} 

.bx { 
    height:60px; 
    line-height:60px; 
    float:left; 
    font-size:105%; 
    margin-top:15px; 
    color: #000; 
    background-color: #E8E8E8 
} 
.bx1 { 
    width:60px; 
    text-align:center 
} 
.bx2 { 
    width:175px; 
    padding-left:20px 
} 
#sp { 
    width: 15px; 
    height:60px; 
    float:left; 
} 
.gnM { 
    width:137px; 
    height: 60px; 
    background:#E8E8E8 url('http://www.41q.org/admin/img/male.png') 0px 0px no-repeat; 
    margin-top:0px; 
    padding: 0; 
    border: 0; 
    margin-left: 0px; 
    float: left; 
    outline: none; 
    text-align:center; 
    font-family: Verdana, Arial, Helvetica, sans-serif; 
    font-size: 105%; 
    font-style:normal; 
    color:#03F; 
} 
.gnF { 
    width:137px; 
    height: 60px; 
    background:#E8E8E8 url('http://www.41q.org/admin/img/female.png') 0px 0px no-repeat; 
    margin-top:0px; 
    padding: 0; 
    border: 0; 
    margin-left: 0px; 
    float: left; 
    outline: none; 
    text-align:center; 
    font-family: Verdana, Arial, Helvetica, sans-serif; 
    font-size: 105%; 
    font-style:normal; 
    color:#03F; 
} 
#r6 #bxGender .button-toggle-on { 
    background-position: 0 -120px 
} 
#bxGender { 
    width:486px; 
    height:60px; 
    float:left; 
    margin-top:15px 
} 

#r6:hover div.bx, #r6:hover input {background-color: #A9A9A9; cursor:pointer} 
#r6:hover .gnM, #r6:hover .gnF {background-position: 0 -60px; cursor:pointer} 

jQuery를 :

$(function() { 
    var $buttons = $("input[type='button']"); 
    $buttons.click(function() { 

     $(this).parent().siblings('.bx, #bxGender .gender').css({'background':'#2F2F2F','color':'#fff'}); 
     $buttons.not(this).removeClass('button-toggle-on'); 
     $(this).toggleClass('button-toggle-on').attr('style',''); 

     var varval = ''; 
     if ($(this).hasClass('button-toggle-on')) { 
      varval = $(this).hasClass('gnF') ? 'Female' : 'Male'; 
      $(this).siblings('input[type="button"]').css('background-position','0 -180px'); 
     } 
     else { 
       $(this).siblings('input[type="button"]').attr('style',''); 
      $(this).parent().siblings('.bx').attr('style',''); 
     } 
     $("#gender").val(varval); 
    }); 
}); 

Answer 1

먼저 ...이에 대한 일 동안 여기

내 링크되어 근무 물건 요 u는 당신이

<div class="sp"></div> 

을하고 복제를 잘 얻는 것을 시도해야 당신이

<div id="sp"></div> 

을 수행 할 때 문서의 ID를 너무 고유해야합니다, 그렇지 않은 순간에, 검증 할 수있는 마크 업이 필요 중첩 된 경우에도 여기에 잘못 복사하더라도 가끔은 여기 저기에 약간의 공백 만 있으면 도움이됩니다 :)

CSS에서 여러 요소에 적용되는 경우 동일한 속성을 반복하지 않습니다. 예를 들어 gnF 그리고 gnM 클래스, 그래서 모든 속성이 함께하고 오직 backgrou 이미지 속성은 별개입니다.

.gnM, 
.gnF, 
.gnA { 
    background:#E8E8E8 0px 0px no-repeat; 
    text-indent:-10000px; 
    width:137px; 
    height: 60px; 
    margin-top:0px; 
    padding: 0; 
    border: 0; 
    margin-left: 0px; 
    float: left; 
    outline: none; 
    text-align:center; 
    font-family: Verdana, Arial, Helvetica, sans-serif; 
    font-size: 105%; 
    font-style:normal; 
    color:#03F; 
} 
.gnA { 
    background-image:url('http://www.41q.org/admin/img/alien.png'); 
} 
.gnM { 
    background-image:url('http://www.41q.org/admin/img/male.png'); 
} 
.gnF { 
    background-image:url('http://www.41q.org/admin/img/female.png'); 
} 

.val 당신이 다음 텍스트 들여 쓰기 텍스트 늘 쇼를 설정하면 당신은 당신의 버튼을 value 속성을 사용하여 JQuery와 측면을 단순화 할 수 있습니다, 그리고 당신은 단순히 $ (이)를 사용하여 값을 검색 할 수 있습니다();

$(function() { 

    var $buttons = $("input[type='button']"), 
     varval; 

    $buttons.click(function() { 

     // this should be done using a class to keep the js cleaner 
     $(this).parent().siblings('.bx, #bxGender .gender').css({ 
      'background': '#2F2F2F', 
      'color': '#fff' 
     }); 

     $buttons.removeClass('button-toggle-on'); 
     $(this).addClass('button-toggle-on'); 

     $("#gender").val($(this).val()); 
    }); 
});​ 

당신이 원하는대로 당신은 많은 버튼을 가질 수 있지만, 여러 행과 양식을 구축하는 경우가 보인다, 내가 입력을위한 클래스를 사용하여도 제안으로이 당신에게 더 많은 유연성을 제공하는 결과를 포함하고 값 할당을 수정하여 가장 가까운 결과 입력을 가져오고 업데이트하므로 모든 행에 적용됩니다. 좀 더 최적화 된 CSS가 2 편집 : 최적화 된 JQuery와 세 번째 버튼 스타일은 물론 나사 고정하지만 난 당신이 :)

편집을 필요 당신을 제공 확신 - 여기

수정 된 바이올린 http://jsfiddle.net/9cr4F/14/입니다 코드를 생성하고 배경 위치를 적용해야 할 때와 마찬가지로 백그라운드 위치를 클래스 버튼 토글 온으로 이동합니다.