링크에서 jQuery 함수로 데이터를 전달하는 방법은 무엇입니까?

Question

$(function(){ 
    $('.tab2').live('click', function() { 
     $('#coverTextH3').text(data[1].H3) 
     $('#coverTextP').text(data[1].P) 
     }); 
      }); 

링크가 있다고 가정 해 봅시다 <a href="www.link.com"></a> 각 인덱스 [0] - [7]에 대해 코드를 반복 할 필요가 없도록 배열의 인덱스 인 데이터를 jQuery 함수에 전달하는 방법은 무엇입니까?

var data = [ 
    { 
     H3: 'name', 
      p: 'more' 

    }, 
    { 
     H3: 'string', 
     p: 'more strings' 
    }] 

Answer 1

수많은 옵션이 있습니다. 자바 스크립트를 통해 핸들러를 연결하는 경우 요소의 ID 또는 클래스가 아닌 사용자 정의 속성을 기반으로 선택합니다. 당신이 바로 a 요소 선언에 핸들러를 클릭하여 첨부 할 수 있습니다,

이

<a href="#" class="tab1" link-number="1">Tab 1</a> 
<a href="#" class="tab2" link-number="2">Tab 2</a> 
<a href="#" class="tab3" link-number="3">Tab 3</a>   

이 경우 자바 스크립트 또는

$(function(){ 
    $('a[link-number]').live('click', function() { 
     var index = $(this).attr('link-number') * 1 - 1; 
     $('#coverTextH3').text(data[index].H3) 
     $('#coverTextP').text(data[index].P) 
    }); 
}); 

다음과 같습니다 :

<a href="#" class="tab1" onclick="setCover(0)">Tab 1</a> 
<a href="#" class="tab2" onclick="setCover(1)">Tab 1</a> 
<a href="#" class="tab3" onclick="setCover(2)">Tab 1</a> 

그래서이 같은 링크의 숫자를 가지고 있다고

및 을 다음과 같이 정의하십시오.

function setCover(index) { 
    $('#coverTextH3').text(data[index].H3) 
    $('#coverTextP').text(data[index].P) 
} 

각 대안에는 htlm이 변경되어야합니다. 어떤 이유로 든 가능하지 않다면 탭 범위를 최소한으로 유지해야합니다. 매우 까다로울 수 있습니다.

Answer 2

<a href="javascript:someFunction(1);">Text</a> 

는 내가 정확히 요구하는지 이해 모르겠어요. 이것이 적합하지 않으면 명확히하십시오. 이와 유사한

Answer 3

뭔가 작업을해야합니다 :

태그 :

<a href="www.link.com" data-index="1" id="link1" /> 

자바 스크립트 :

당신의 연결 ID는 당신이 좋아하는 뭔가를 할 수 배열의 인덱스 순서에 해당

$(function(){ 
    $('#link1').live('click', function() { 
     var idx = $(this).data('index'); 
     $('#coverTextH3').text(data[idx].H3) 
     $('#coverTextP').text(data[idx].P) 
    }); 
}); 

Answer 4

경우 이 :

example jsfiddle

jQuery를 :

$(function() { 
    $('.tab2').live('click', function(e) { 
     e.preventDefault(); 

     // parse the integer from the ID 
     // and get the 0-based index (by subtracting 1) 
     var idx = $(this).attr('id').replace('link', '') * 1 - 1; 

     $('#coverTextH3').text(data[idx].H3) 
     $('#coverTextP').text(data[idx].p) 
    }); 
}); 

HTML :

<a href="#www.link.com" id="link1" class="tab2">Link 1</a> 
<a href="#www.link.com" id="link2" class="tab2">Link 2</a> 

<h3 id="coverTextH3"></h3> 
<p id="coverTextP"></p>