어떻게 이것이 가장 짧은 방법으로 할 수 있습니까?

사용자가 클릭 한 a에 i 요소의 위치를 보유한 class을 저장했습니다. a 태그를 클릭하면 attr 값을 가져와 i 요소 태그에 클래스로 추가하려고합니다. 나는 아래에 예시 된대로 그것을 시도했다. 그러나 나는 많은 코드에 이것을 느낀다. 가능한 가장 짧은 시간에 어떻게 할 수 있습니까?어떻게 이것이 가장 짧은 방법으로 할 수 있습니까?

<i id="pps_ToggledIcon" class="pisp_p pISImage"></i> 

    <li class="privListItem checkedList selectedList li_public"> 
     <a href="/p" class="psLink" title="pisp_p"> 
      <span class="privLabel">PP</span> 
     </a> 
    </li> 
    <li class="privListItem checkedList selectedList li_public"> 
     <a href="/f" class="psLink" title="pisp_f"> 
      <span class="privLabel">F</span> 
     </a> 
    </li> 
    <li class="privListItem checkedList selectedList li_public"> 
     <a href="/o" class="psLink" title="pisp_o"> 
      <span class="privLabel">O</span> 
     </a> 
    </li>

다음은 JS에게 있습니다

$(".xyp li a").on("click", function(e) { 
     var pIcnSltd = $(this).attr("title"); 
     var pTIcn = $("#pps_ToggledIcon"); 
     if (pTIcn.hasClass("pisp_f") || pTIcn.hasClass("pisp_o")) { 
      pTIcn.removeClass("pisp_f"); 
      pTIcn.removeClass("pisp_o"); 
      pTIcn.addClass("pisp_p"); 
     } 
     else if (pTIcn.hasClass("pisp_p") || pTIcn.hasClass("pisp_o")) { 
      pTIcn.removeClass("pisp_p"); 
      pTIcn.removeClass("pisp_o"); 
      pTIcn.addClass("pisp_f"); 
     } 
     else if (pTIcn.hasClass("pisp_p") || pTIcn.hasClass("pisp_f")) { 
      pTIcn.removeClass("pisp_p"); 
      pTIcn.removeClass("pisp_f"); 
      pTIcn.addClass("pisp_f"); 
     } 
    });

출처

2013-03-21 STFU_NC

당신은 http://codereview.stackexchange.com을 보았습니까? 이런 종류의 질문에는 좋은 점이 있습니다. 나는 안경을 낀 채 똑똑한 남자가 camomille tea 한 잔을보고 코드를 검토한다고 상상해 봅니다. – BumbleB2na

클래스를 추가하는 대신'title' 대신 HTML5'data-'속성을 사용해야하고, 또한'.data()'를 사용해야하는 것처럼 보입니다. 그것은 그것을 한 줄로 떨어 뜨릴 것입니다. – Jon

마지막''pTIcn.addClass ("pisp_f");''pTIcn.addClass ("pisp_o");'가 아니어야합니까? – Vlad

jQuery를 메소드 체인 지원

$(".xyp li a").on("click", function(e) { 
     var pIcnSltd = $(this).attr("title"); 
     var pTIcn = $("#pps_ToggledIcon"); 
     if (pTIcn.hasClass("pisp_f") || pTIcn.hasClass("pisp_o")) { 
      pTIcn.removeClass("pisp_f").removeClass("pisp_o").addClass("pisp_p"); 
     } 
     else if (pTIcn.hasClass("pisp_p") || pTIcn.hasClass("pisp_o")) { 
      pTIcn.removeClass("pisp_p").removeClass("pisp_o").addClass("pisp_f"); 
     } 
     else if (pTIcn.hasClass("pisp_p") || pTIcn.hasClass("pisp_f")) { 
      pTIcn.removeClass("pisp_p").removeClass("pisp_f").addClass("pisp_f"); 
     } 
    });

을하지만 염두에 두어야 할, 짧은 항상 === 최선이 아니다. 또한, 당신의 논리는 나에게 복잡하게 보입니다. 나는 당신이하려는 것을 해독하려고 애 쓰지 않았습니다.

이 코드를 단순화하려면 논리를 재고해야합니다.

출처

2013-03-21 22:44:23

그러나 가장 간단한 방법이 가장 좋습니다. 그리고 이것은 어떤 상상력의 스트레칭으로도 단순하지 않습니다. – Jon

방법 단지 클래스와 클릭 앵커 제목과 함께 pISImage 클래스를 다시 추가 모든 클래스를 제거하고, 약 :

$(".xyp li a").on("click", function() { 
    $("#pps_ToggledIcon").removeClass().addClass('pISImage '+this.title); 
});

출처

2013-03-21 22:55:45 adeneo

언급 한 것들을 제거하고 추가 한 뒤

$(".xyp li a").on("click", function() { 
    $("#pps_ToggledIcon").removeClass('pisp_f pisp_p pisp_o').addClass(this.title); 
});

참고 : "다른"pISImage를 포함하여 모든 클래스를 제거하는 것이 좋으면, adeneo의 솔루션을 사용하십시오. 제거/추가가 원치 않는 결과를 초래하거나 다른 코드를 깨뜨리는 경우 (해당 클래스를 기반로하는 이벤트 관리, 시각적 표현 등)

출처

2013-03-21 23:07:04

어떻게 이것이 가장 짧은 방법으로 할 수 있습니까?

답변

관련 문제