페이지가 양식처럼 작동하도록 돕는 JQuery

Question

www.wanderfly.com과 비슷한 것을하려고합니다.

mysite.co.uk/City : 결국 에 때 제출 버튼을하면 사용자가 같은 것을로 전송됩니다 클릭 있도록 은 기본적으로 최종 목표는 체크 박스처럼 내 페이지 행위 div의를하는 것입니다 = 1 | 4 | 5 | 그가로 그는이 통과 한 것 다시 DIV (4)를 클릭했을 경우 사용자가 div의 번호 1,4,5 & 9. 클릭이 예에서는 그래서

9 :

mysite.co.uk/City=1|5|9

나는 이것을 처리하는 방법에 대한 올바른 방향으로 나를 도와주세요. JQuery에 이미 이런 종류의 라이브러리가 있습니다. .

Answer 1

$('div').bind('click', function() { 
    if($(this).hasClass('selected')) { 
     $(this).removeClass('selected'); 
    } else { 
     $(this).addClass('selected'); 
    } 
}); 

$('#button').bind('click', function() { 
    var newURL = 'http://mysite.co.uk/City='; 
    $('div.selected').each(function() { 
     newURL= newURL+$(this).attr('id')+'|'; 
    }); 
    alert(newURL); 
}); 

example

Answer 2

<div class="option" value="1">Click me!</div> 
<div class="option" value="2">Click me too!</div> 
<div class="option" value="3">And me!</div> 
<button id="submit">Submit!</button> 

$(".option").click(function(){ 
    $(this).toggleClass("selected"); 
}); 

$("#submit").click(function(){ 
    var q = "City="; 
    $(".option.selected").each(function(i, el){ 
     q += $(el).attr("value")+"|"; 
    }); 
    q = q.slice(0, -1); 
    window.location = "http://www.mysite.co.uk/?"+q; 
});