使用 JS 逻辑从自定义选项构建 URL 链接

Question

提前谢谢你。

我仍在学习 JavaScript，随着项目的临近，我真的需要一些帮助/见解。

我正在研究的逻辑是这样的：

1. HTML结构：

<input title="Type Here" class="search" type="text" placeholder="Type Here">

<select id="device_select">
<option id=one value='a'>a</option>
<option id=two value='b'>b</option>
<option id=three value='c'>c</option>
<option id=many value='many'>many</option>
</select>

<span class="content-btn-1" type="button"></span>

2。 JS结构：

$(function(){

var one = {title:"titletext", description:"descrtext", keyword:"text",
subject:"533,567,457", provider:"c9drlt-sdgtrzz", training:"true"};

var two = {title:"titletext", description:"descrtext", keyword:"textthis",
subject:"537", provider:"c9drlt-sdgtrjt", training:"false"};

});

3. JS逻辑结构：

function search_class() {
if (training == true) {training = "&tr=0";} else {training = "";}
return training;
}

function search_custom() {  
// NOT SURE HOW TO PULL IT UP
// if subject has more than 1 variable like subject:"533,567,457"
// then construct the logic to separate them:
// &s=533&s=2&567&s=3&457
return subject;
}

var url = "www.website.com";
var text_area = $('.search');
var btn_click = $('.content-btn-1');

btn_click.click (function () {
var value = text_area.val();
var ty = "#s=";
if ($.trim($(text_area).val())) {
window.location.href = url+ty+search_class()+search_custom();
}
});

4.结果：

www.website.com#s=titletext&d=descrtext&t=text&p=c9drlt-sdgtrzz&tr=0&s=533&s=2&567&s=3&457

5.困难的部分： 我们如何执行逻辑，使其在 #2 中获取该数组，附加到 #1 中的选项 id 1、2 ... 等，然后在点击时在 #3 中构造链接？

简而言之：这是一个搜索功能，其中包含具有唯一变量的选项。

感谢任何帮助！

Answer 1

首先，我认为您想稍微清理一下您的选择框，并为其赋予您可以在 javascript 中实际使用的值。

<input title="Type Here" id="search_text" type="text" placeholder="Type Here" />

<select id="device_select">
    <option value='1'>a</option>
    <option value='2'>b</option>
    <option value='3'>c</option>
    <option value='0'>many</option>
</select>

<input id="submit_button" type="button" />

然后我们需要稍微清理一下您的对象，使其 a) 更具可读性，并且 b) 它可以很好地链接到您的选择框。如果我们将它嵌套到一个对象中，以后引用它会更容易。

// we would like an array that corresponds with our values in the select box.
var options = [
    false,
    {
        title:        "titletext",
        description:  "descrtext",
        keyword:      "text",
        subject:      "533,567,457",
        provider:     "c9drlt-sdgtrzz",
        // a boolean like "false" or "true" should not be surrounded by braces, is easier to manipulate.
        training:     true
    },{
        title:        "titletext",
        description:  "descrtext",
        keyword:      "textthis",
        subject:      "537",
        provider:     "c9drlt-sdgtrjt",
        training:     false
    }
];

最后一位在逻辑中。我尝试对其进行一些简化，但在这种情况下，最重要的变化是for-loop，因为它会列出每个key/value 对，然后我们可以将其添加到我们的搜索字符串中。我还在这里包含了一些错误躲避，例如检查是否存在空值以及所选值是否实际存在（例如，如果您在 device_options 中选择 3，我们的 options 数组中没有该索引上面，所以我们实际上不能构造它 - 但它实际上不会出错。）

$("#submit_button").on("click", function(event){
    // now for the hard part, converting your select item into a string and appending the text
    // 1. get the search string from the input
    var searchstring = "#searchText=" + $("#search_text").val().trim();
    // 2. get the select box value of the selected option
    var selected = $("#device_select").val();
    // 3. Get the corresponding value. 
    // If the corresponding value is false (remember the first item in the array above?), then we do nothing.
    // We also do nothing if we are looking for an undefined number in the array (say, item #238)
        selected = typeof options[selected] != "undefined" && options[selected] !== false
            ? options[selected]
            : false;
    // if selected was not set to false, then it exists in our options and we can use it.
    if(selected){
        for(key in selected){
            // if you set a value in options to false, we'll ignore it here using a 'continue'
            // continue will move on to the next iteration of the for loop immediately
            if(!selected[key]) continue;
            searchstring += "&" + key + "=" + selected[key];
        }
        window.location.href = "http://www.mysite.tld/" + searchstring;
    } else {
        // log an error here.
        if(console) console.log("Could not find device!");
    }
});

这有意义/有帮助吗？我自己没有对此进行测试，但它应该都可以工作。