开发者

JQuery to help page act like a form

开发者 https://www.devze.com 2023-02-20 04:04 出处:网络
I\'m trying to do something similar to www.wanderfly.com . Basi开发者_如何转开发cally the end goal is to have the divs in my page act like a checkbox, so at the end

I'm trying to do something similar to www.wanderfly.com . Basi开发者_如何转开发cally the end goal is to have the divs in my page act like a checkbox, so at the end when a submit button is clicked the user will be transferred to something like:

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

So in this example the user clicked on divs number 1,4,5 & 9. if he would have clicked div 4 again then he would've been passed to:

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

I hope i'm clear, please help me with a right direction on how to handle this and if JQuery has already a library for something of this sort.


<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;
});


$('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

0

精彩评论

暂无评论...
验证码 换一张
取 消