Question

我正在尝试做类似于www.wanderfly.com的事情。基本上最终目标是让我的页面中的div像一个复选框，所以最后单击提交按钮时，用户将转移到以下内容：

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

因此，在此示例中，用户点击了数字1,4,5＆amp; 9.如果他点击了div 4再次，他将被传递给：

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

我希望我很清楚，请帮助我正确指导如何处理这个以及如果JQuery有已经是这种类型的库。

Answer 1

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

Answer 2

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

JQuery帮助页面像表单一样行事

2 个答案: