얼굴을 선택할 때 따옴표를 변경하십시오.

Question

코드 묶음이 이미 있습니다 (JS fiddle project). 거의 완료되었지만, 사람의 얼굴을 누른 다음 결과를 아래로 스크롤하면 JS가 토글됩니다. 당신이 그것을 볼 수없는 경우) 그 사람의 견적으로 변경됩니다.

는 이미이 부분과 JS의 스위치를 가지고 :

$(function() { 
    var $profiles = $("#profile1, #profile2, #profile3, #profile4, #profile5, #profile6, #profile7, #profile8, #profile9, #profile10, #profile11"); 
    $profiles.click(function(e) { 
     $profiles.removeClass("focused"); 
     $(this).addClass("focused"); 
    }); 
}); 

하지만 난 어떻게 든 따옴표와 결합해야합니다.

정말로 구체적으로 나를 돕고 싶지 않다면, 그냥 의사 코드에 만족하거나 생각하는 방법에 도움이 될 것입니다. 나는 너무 오랫동안 똑바로 생각할 수있게이 조각에 앉아 있었다.

무엇을 권하고 싶습니까?

건배! 모두들 락!

Answer 1

이 같은 문제 해결 : 그것은 프로파일 번호에서 인용의 인덱스를 추출

을

$profiles.click(function(e) { 
    var profileNr = parseInt($(this).attr("id").substring(7)); 
    $profiles.removeClass("focused"); 
    $(this).addClass("focused"); 
    $(".thequote .show").removeClass("show"); 
    $(".thequote blockquote").eq(profileNr-1).find("p").addClass("show"); 
}); 

다음의 jQuery EQ와 적절한 견적을 선택(). JS 피들 (Piddle)도 업데이트했고 제대로 작동하는지 테스트했습니다.

Answer 2

인용구가 속한 프로필을 나타내는 데이터 속성과 같이 사용자의 인용구에 어떤 종류의 참조가 있어야합니다. 예 :

<blockquote data-profileid="profile8"> 
    <p> 
     "Sist är starkast... eller något sånt." 
    </p> 
</blockquote> 

그런 다음 onclick 함수에서 clicked id와 일치하는 데이터 속성이있는 인용구를 표시하십시오. 이 같은 클릭 ID를 얻을 수 있습니다 :

var id = $(this).attr('id');