如何修改Javascript中的URL

Question

目前，我有一个基于表单选择生成的单词列表。当选择改变时，词汇也会改变。我想添加的是一个简单的链接，其中包含URL中生成的单词。

特别是，在jsfiddle.net/9v9xu266/我有一个基于选择apple,orange和pear中的哪一个而生成的列表。例如，如果我只选择apple和pear，然后我的名单会说

-o Farmer1 Farmer2 

我想补充，下面这个名单是什么，是以下链接：

<a href="XX.XX.XX.XX/exec?args=Farmer1%20Farmer2>Click Me</a> 

也就是说，后args=在URL中，我将始终希望以空格分隔的单词列表。

所以，正如你所看到的那样，“举重”（比如它）已经在这里完成了。但我不知道如何动态调整网址。

Answer 1

既然你已经输出大部分你想要的话，你可以尝试http://jsfiddle.net/9v9xu266/1/

$(document).ready(function() { 
 
    $(":checkbox").prop("checked", false); 
 
    $('table td:not(:first-child)').hide(); 
 
    $('table tr:not(:first-child)').hide(); 
 

 
    updateTestList(); 
 
    $("#testListClickContainer").click(function() { 
 
    $("#testList").toggle(); 
 
    $("#hideTestList").toggle(); 
 
    $("#showTestList").toggle(); 
 
    }); 
 

 
    $("#xor").click(function() { 
 
    if ($(this).is(':checked')) { 
 
     xorRows(); 
 
    } else { 
 
     showOrHideRows(); 
 
    } 
 
    updateTestList(); 
 
    }); 
 

 
    $(".type", "#optionBoxes").click(function() { 
 
    if ($(this).is(':checked')) { 
 
     showColumn(this.name); 
 
     showOrHideRows(); 
 
     if (document.getElementById('xor').checked) { 
 
     xorRows(); 
 
     } 
 
    } else { 
 
     hideColumn(this.name); 
 
     showOrHideRows(); 
 
     if (document.getElementById('xor').checked) { 
 
     xorRows(); 
 
     } 
 
    } 
 
    var tests = "-o"; 
 
    $("#tableResult tr:visible:not(:first-child) td:first-child").each(function() { 
 
     tests = tests.concat(" "); 
 
     tests = tests.concat($(this).text()); 
 
    }); 
 
    $("#testList").text(tests); 
 
    $('#link').attr('href', 'http://XX.XX.XX.XX/exec?args=' + tests.replace('-o ', "")); 
 
    updateTestList(); 
 
    }); 
 
}); 
 

 
function xorRows() { 
 
    $("#tableResult tr:not(:first-child)").show(); 
 
    $("#tableResult tr:not(:first-child)").each(function() { 
 
    var filtered = false; 
 
    var inValidColumns = $("td:visible:not(:first-child)", this) 
 
     .filter(function() { 
 
     filtered = true; 
 
     return $(this).text() === 0; 
 
     }).length; 
 
    $(this).toggle(inValidColumns === 0 && filtered); 
 
    }); 
 

 
} 
 

 
function hideColumn(columnIndex) { 
 
    $('#tableResult td:nth-child(' + (columnIndex) + ')').hide(); 
 
} 
 

 
function showColumn(columnIndex) { 
 
    $('#tableResult td:nth-child(' + (columnIndex) + ')').show(); 
 
} 
 

 
function showOrHideRows() { 
 
    $("#tableResult tr:not(:first-child)").show(); 
 
    $("#tableResult tr:not(:first-child)").each(function() { 
 
    var validColumns = $("td:visible:not(:first-child)", this).filter(function() { 
 
     return $(this).text() == 1; 
 
    }).length; 
 

 
    $(this).toggle(validColumns !== 0); 
 

 
    }); 
 

 
} 
 

 
function updateTestList() { 
 
    var tests = "-o"; 
 
    if ($("#testList").is(":visible")) { 
 
    alert('doing stuff'); 
 
    $("#tableResult tr:visible:not(:first-child) td:first-child").each(function() { 
 
     tests = tests.concat(" "); 
 
     tests = tests.concat($(this).text()); 
 
    }); 
 
    $("#testList").text(tests); 
 
    } 
 
}

.cmdToCopy { 
 
    background-color: #6699FF; 
 
    color: white; 
 
    width: 500px; 
 
    font-family: monospace; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<form name="options" onsubmit="return false"> 
 
    <b>xor:</b> 
 
    <input type="checkbox" name="xor" id="xor" checked="" />XOR 
 
</form> 
 
<form name="tcol" onsubmit="return false"> 
 
    <b>Features:</b> 
 
    <div id="optionBoxes"> 
 
    <input type="checkbox" name="2" class="type" checked="" />apple 
 
    <input type="checkbox" name="3" class="type" checked="" />orange 
 
    <input type="checkbox" name="4" class="type" checked="" />pear 
 
    </div> 
 
</form> 
 
<div id="testListClickContainer"> 
 
    <a href="javascript:void(0);"> 
 
    <div id="hideTestList" style="display:none;">Hide test subset command</div> 
 
    <div id="showTestList">Show test subset command</div> 
 
    </a> 
 
</div> 
 
<p> 
 
    <div id="testList" class="cmdToCopy" style="display:none;">List of tests.</div> 
 
</p> 
 
<table border="1" id="tableResult"> 
 
    <tbody> 
 
    <tr> 
 
     <td id="tcol1">Farmer #</td> 
 
     <td id="tcol2">apple</td> 
 
     <td id="tcol3">orange</td> 
 
     <td id="tcol4">pear</td> 
 
    </tr> 
 
    <tr> 
 
     <td name="tcol1" id="tcol1" class="bold">Farmer1</td> 
 
     <td name="tcol2" id="tcol2">1</td> 
 
     <td name="tcol3" id="tcol3" class="italic">1</td> 
 
     <td name="tcol4" id="tcol4">1</td> 
 
    </tr> 
 
    <tr> 
 
     <td name="tcol1" id="tcol1" class="bold">Farmer2</td> 
 
     <td name="tcol2" id="tcol2">0</td> 
 
     <td name="tcol3" id="tcol3" class="italic">1</td> 
 
     <td name="tcol4" id="tcol4">1</td> 
 
    </tr> 
 
    <tr> 
 
     <td name="tcol1" id="tcol1" class="bold">Farmer3</td> 
 
     <td name="tcol2" id="tcol2">0</td> 
 
     <td name="tcol3" id="tcol3" class="italic">1</td> 
 
     <td name="tcol4" id="tcol4">0</td> 
 
    </tr> 
 
    <tr> 
 
     <td name="tcol1" id="tcol1" class="bold">Farmer4</td> 
 
     <td name="tcol2" id="tcol2">0</td> 
 
     <td name="tcol3" id="tcol3" class="italic">1</td> 
 
     <td name="tcol4" id="tcol4">0</td> 
 
    </tr> 
 
    <tr> 
 
     <td name="tcol1" id="tcol1" class="bold">Farmer5</td> 
 
     <td name="tcol2" id="tcol2">0</td> 
 
     <td name="tcol3" id="tcol3" class="italic">1</td> 
 
     <td name="tcol4" id="tcol4">0</td> 
 
    </tr> 
 
    <tr> 
 
     <td name="tcol1" id="tcol1" class="bold">Farmer6</td> 
 
     <td name="tcol2" id="tcol2">0</td> 
 
     <td name="tcol3" id="tcol3" class="italic">1</td> 
 
     <td name="tcol4" id="tcol4">0</td> 
 
    </tr> 
 
    <tr> 
 
     <td name="tcol1" id="tcol1" class="bold">Farmer7</td> 
 
     <td name="tcol2" id="tcol2">0</td> 
 
     <td name="tcol3" id="tcol3" class="italic">1</td> 
 
     <td name="tcol4" id="tcol4">0</td> 
 
    </tr> 
 
    <tr> 
 
     <td name="tcol1" id="tcol1" class="bold">Farmer8</td> 
 
     <td name="tcol2" id="tcol2">0</td> 
 
     <td name="tcol3" id="tcol3" class="italic">1</td> 
 
     <td name="tcol4" id="tcol4">0</td> 
 
    </tr> 
 
    <tr> 
 
     <td name="tcol1" id="tcol1" class="bold">Farmer9</td> 
 
     <td name="tcol2" id="tcol2">0</td> 
 
     <td name="tcol3" id="tcol3" class="italic">1</td> 
 
     <td name="tcol4" id="tcol4">0</td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 
<a href="" id="link">Click Me</a>

顺便说一句，我添加的代码是：

<a href="" id="link">Click Me</a> 

和

$('#link').attr('href','http://XX.XX.XX.XX/exec?args=' + tests.replace('-o ', "")); 

Answer 2

您可以使用jQuery中提供的$.param函数。这将把JavaScript对象转换为URL表示。

如：

$("#testList").text(tests); 
var $link = $('<a>').html('Link'); 
$link.attr('href', $.param(tests)); 

下面是一个例子：http://jsfiddle.net/m29r8xw3/

Answer 3

如果你已经有项目在数组中的字符串，然后CONCAT他们到另一个字符串的URL。我不记得看到OP的小提琴，哎呀。

var arr = ['farmer1', 'farmer2']; 
 
var url = "https://example.com/exec?args=" + arr[0] + "%20" + arr[1]; 
 
console.log(url); 
 

 
var in1 = document.getElementById("in1"); 
 
in1.addEventListener('change', function(event) { 
 
    var in1Data = []; 
 
    in1Data.push(in1.value); 
 
    console.log(in1Data); 
 
    var str = in1Data.toString(); 
 
    var args = encodeURIComponent(str); 
 
    var base = "https://example.com/exec?args="; 
 
    var out1 = document.getElementById('out1'); 
 
    return out1.value = base + args; 
 
    event.stopPropagation(); 
 
}, false);

<fieldset> 
 
    <legend>modifyURL</legend> 
 
    <div><small>Enter: Item1 Item2 ... ItemN+ (space delimited list)</small> 
 
    </div> 
 
    <label>Enter List:</label> 
 
    <input id="in1" /> 
 
    <br/> 
 
    <label>URL:</label> 
 
    <output id="out1"></output> 
 
</fieldset>