怎么拼接地址

对应js部分改动了下，代码附上
稍显罗嗦，大牛们可以帮精简下<script type="text/javascript">
///定义3个变量，分别存放三个div单独字符串
///当data-v=“0”时因为不用拼接，故对应变量为“”,若不为空则给对应变量赋值
//最后将3个变量分别拼接到url后面（注：每次拼接前需要刷新url还原成“/s/shanghai/ec”）
$(function(){
var d1 = "";//url-p="d"
var d2 = "";//url-p="p"
var d3 = "";//url-p="k"
$('.div_menu_item li').on('click',function(){
$(this).addClass('on').siblings().removeClass('on');
$(this).find('a').find('i').addClass('m_i').parent().parent().siblings().find('a').find('i').removeClass('m_i');
var d_v = $(this).attr("data-v");
var u_p = $(this).parent().parent().attr("url-p");
if(u_p == "d"){
if(d_v == 0){
d1 = "";
}else{
d1 = u_p + d_v;
}
//alert("d1="+d1);
}
if(u_p == "p"){
if(d_v == 0){
d2 = "";
}else{
d2 = u_p + d_v;
}
//alert("d2="+d2);
}
if(u_p == "k"){
if(d_v == 0){
d3 = "";
}else{
d3 = u_p + d_v;
}
//alert("d3="+d3);
}
var url = $(".a").attr("url");
var idx = url.indexOf("-");
if(idx != -1){
url = url.substring(0,idx);
}
if(d1 != ""){
url = url +"-"+d1;
}
if(d2 != ""){
url = url +"-"+d2;
}
if(d3 != ""){
url = url +"-"+d3;
}
$(".a").attr("url",url);
alert( $(".a").attr("url"));

});
})
</script>

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
.div_menu .div_menu_item{
width:300px;
height:100px;
text-align:center;
margin-bottom: 20px;
}
    .div_menu_item li{
    width:300px;
    height:30px;
    line-height:30px;
    display:inline-block;
    position:relative;
    border:1px solid #999;
}
.div_menu_item li.on{
background:#9C6;
}
    .div_menu_item .m_i{
    width:10px;
    height:10px;
    position:absolute;
    right:10px;
    top:10px;
    background:#00BCF3;
}
.a{
width: 100px;
height: 30px;
background: #00BCF3;
color: #FFF;
line-height: 30px;
text-align: center;
display: block;
}
</style>
</head>
<body>
<div class="div_menu">
     <div url-p="d" class="div_menu_item" style="display:block;">
         <ul>
             <li data-v="0" class="on">
                 <a>111111111<i class="m_i"></i></a>
                </li>
                <li data-v="1">
                 <a>222222222<i></i></a>
                </li>
                <li data-v="2">
                 <a>333333333<i></i></a>
                </li>
            </ul>
        </div>
        <div url-p="p" class="div_menu_item">
         <ul>
             <li data-v="0" class="on">
                 <a>3333333333<i class="m_i"></i></a>
                </li>
                <li data-v="1">
                 <a>4444444444<i></i></a>
                </li>
                <li data-v="2">
                 <a>4444444444<i></i></a>
                </li>
            </ul>
        </div>
        <div url-p="k" class="div_menu_item">
         <ul>
             <li data-v="0" class="on">
                 <a>555555555555<i class="m_i"></i></a>
                </li>
                <li data-v="1">
                 <a>66666666<i></i></a>
                </li>
                <li data-v="2">
                 <a>7777777777<i></i></a>
                </li>
            </ul>
        </div>
    </div>
    <a class="a" url="/s/shanghai/ec">确定</a>
</body>
<script type="text/javascript">
$(function(){

var url = $(".a").attr("url");
$('.div_menu_item li').on('click',function(){
$(this).addClass('on').siblings().removeClass('on');
$(this).find('a').find('i').addClass('m_i').parent().parent().siblings().find('a').find('i').removeClass('m_i');
var p = $(this).parent().parent().attr("url-p");
var v = $(this).attr("data-v");
url = url.replace(new RegExp("-"+p+"\\d","ig"),"")+(v=="0"?"":"-"+p+v);
$(".a").attr("href",url);
alert(url);
});
})
</script>
</html>
你可以点击查看演示代码，或使用下面的代码，先在绑定的是确定按钮，你可以根据需要自己修改    $(function(){
        $('.a').click(function(){
         // /s/shanghai/ec-d1-p1-k1
            var u = $(this).attr('url');
            var d = $('.div_menu_item[url-p="d"] li[data-v!="0"].on').attr('data-v');
            var p = $('.div_menu_item[url-p="p"] li[data-v!="0"].on').attr('data-v');
            var k = $('.div_menu_item[url-p="k"] li[data-v!="0"].on').attr('data-v');

            var f = u
            + (d ? '-d' + d : '')
            + (p ? '-p' + p : '')
            + (k ? '-k' + k : '');

            alert(f);
        });

        $('.div_menu_item li').on('click',function(){
            $(this)
            .addClass('on')
            .siblings()
            .removeClass('on');

            $(this)
            .find('a')
            .find('i')
            .addClass('m_i')
            .parent()
            .parent()
            .siblings()
            .find('a')
            .find('i')
            .removeClass('m_i');
        });
    });
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    li{
        list-style: none;
    }
    .div_menu .div_menu_item{
        width:300px;
        height:100px;
        text-align:center;
        margin-bottom: 20px;
    }
    .div_menu_item li{
        width:300px;
        height:30px;
        line-height:30px;
        display:inline-block;
        position:relative;
        border:1px solid #999;
    }
    .div_menu_item li.on{
        background:#9C6;
    }
    .div_menu_item .m_i{
        width:10px;
        height:10px;
        position:absolute;
        right:10px;
        top:10px;
        background:#00BCF3;
    }
    .a{
        width: 100px;
        height: 30px;
        background: #00BCF3;
        color: #FFF;
        line-height: 30px;
        text-align: center;
        display: block;
    }
    </style>
</head>
<body>
    <div class="div_menu">
        <div url-p="d" class="div_menu_item" style="display:block;">
            <ul>
                <li data-v="0" class="on">
                    <a>111111111<i class="m_i"></i></a>
                </li>
                <li data-v="1">
                    <a>222222222<i></i></a>
                </li>
                <li data-v="2">
                    <a>333333333<i></i></a>
                </li>
            </ul>
        </div>
        <div url-p="p" class="div_menu_item">
            <ul>
                <li data-v="0" class="on">
                    <a>3333333333<i class="m_i"></i></a>
                </li>
                <li data-v="1">
                    <a>4444444444<i></i></a>
                </li>
                <li data-v="2">
                    <a>4444444444<i></i></a>
                </li>
            </ul>
        </div>
        <div url-p="k" class="div_menu_item">
            <ul>
                <li data-v="0" class="on">
                    <a>555555555555<i class="m_i"></i></a>
                </li>
                <li data-v="1">
                    <a>66666666<i></i></a>
                </li>
                <li data-v="2">
                    <a>7777777777<i></i></a>
                </li>
            </ul>
        </div>
    </div>
    <a class="a" url="/s/shanghai/ec" onclick="getUrl(this)">确定</a>
</body>
<script type="text/javascript">
    $(function(){

        $('.div_menu_item li').on('click',function(){
            $(this).addClass('on').siblings().removeClass('on');
            $(this).find('a').find('i').addClass('m_i').parent().parent().siblings().find('a').find('i').removeClass('m_i');
        });
    })
function getUrl(o){
var url=o.getAttribute("url");
var divArr=new Array();
var liArr=new Array();

//获取出包含有属性class、url-p的div，装进divArr数组
var allDivArr=document.getElementsByTagName("div");
for(var i=0;i<allDivArr.length;i++){
if(allDivArr[i].getAttribute("class") && allDivArr[i].getAttribute("url-p")){

divArr.push(allDivArr[i]);
//获取出包含有属性class=on的li，装进liArr数组
pushLiArr(allDivArr[i]);
}
}
//alert(divArr.length); //获取出包含有属性class=on的li，装进liArr数组
function pushLiArr(oDiv){
var temArr=oDiv.getElementsByTagName("li");
//alert(temArr.length);
for(var i=0;i<temArr.length;i++){
if(temArr[i].getAttribute("class")=="on"){
liArr.push(temArr[i]);
}
}
} //如果数组长度一样
if(liArr.length==divArr.length){
for(var i=0;i<divArr.length;i++){
url+="-"+divArr[i].getAttribute("url-p")+liArr[i].getAttribute("data-v");
}
}
alert(url);
}
</script>
</html>
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    li{
        list-style: none;
    }
    .div_menu .div_menu_item{
        width:300px;
        height:100px;
        text-align:center;
        margin-bottom: 20px;
    }
    .div_menu_item li{
        width:300px;
        height:30px;
        line-height:30px;
        display:inline-block;
        position:relative;
        border:1px solid #999;
    }
    .div_menu_item li.on{
        background:#9C6;
    }
    .div_menu_item .m_i{
        width:10px;
        height:10px;
        position:absolute;
        right:10px;
        top:10px;
        background:#00BCF3;
    }
    .a{
        width: 100px;
        height: 30px;
        background: #00BCF3;
        color: #FFF;
        line-height: 30px;
        text-align: center;
        display: block;
    }
    </style>
</head>
<body>
    <div class="div_menu">
        <div url-p="d" class="div_menu_item" style="display:block;">
            <ul>
                <li data-v="0" class="on">
                    <a>111111111<i class="m_i"></i></a>
                </li>
                <li data-v="1">
                    <a>222222222<i></i></a>
                </li>
                <li data-v="2">
                    <a>333333333<i></i></a>
                </li>
            </ul>
        </div>
        <div url-p="p" class="div_menu_item">
            <ul>
                <li data-v="0" class="on">
                    <a>3333333333<i class="m_i"></i></a>
                </li>
                <li data-v="1">
                    <a>4444444444<i></i></a>
                </li>
                <li data-v="2">
                    <a>4444444444<i></i></a>
                </li>
            </ul>
        </div>
        <div url-p="k" class="div_menu_item">
            <ul>
                <li data-v="0" class="on">
                    <a>555555555555<i class="m_i"></i></a>
                </li>
                <li data-v="1">
                    <a>66666666<i></i></a>
                </li>
                <li data-v="2">
                    <a>7777777777<i></i></a>
                </li>
            </ul>
        </div>
    </div>
    <a class="a" url="/s/shanghai/ec" onclick="getUrl(this)">确定</a>
</body>
<script type="text/javascript">
    $(function(){

        $('.div_menu_item li').on('click',function(){
            $(this).addClass('on').siblings().removeClass('on');
            $(this).find('a').find('i').addClass('m_i').parent().parent().siblings().find('a').find('i').removeClass('m_i');
        });
    })
function getUrl(o){
var url=o.getAttribute("url");
var divArr=new Array();
var liArr=new Array();

//获取出包含有属性class、url-p的div，装进divArr数组
var allDivArr=document.getElementsByTagName("div");
for(var i=0;i<allDivArr.length;i++){
if(allDivArr[i].getAttribute("class") && allDivArr[i].getAttribute("url-p")){

divArr.push(allDivArr[i]);
//获取出包含有属性class=on的li，装进liArr数组
pushLiArr(allDivArr[i]);
}
}
//alert(divArr.length); //获取出包含有属性class=on的li，装进liArr数组
function pushLiArr(oDiv){
var temArr=oDiv.getElementsByTagName("li");
//alert(temArr.length);
for(var i=0;i<temArr.length;i++){
if(temArr[i].getAttribute("class")=="on"){
liArr.push(temArr[i]);
}
}
} //如果数组长度一样
if(liArr.length==divArr.length){
for(var i=0;i<divArr.length;i++){
url+="-"+divArr[i].getAttribute("url-p")+liArr[i].getAttribute("data-v");
}
}
alert(url);
}
</script>
</html>