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＆amp; T公司=文本＆安培; P = c9drlt-sdgtrzz＆安培; TR = 0＆安培; S = 533＆安培; S = 2及567＆安培; S = 3及457

5。困难的部分： 我们如何做逻辑，以便在＃2中使用该数组，在＃1中附加选项id一，二......等，然后在点击时构建＃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 - 循环，因为它会列出每个key/value对，然后我们可以将它添加到我们的搜索字符串中。我还在此处包含了一些错误，例如检查是否为空值以及所选值是否实际存在（例如，如果您在3中选择device_options，我们就没有该索引在我们上面的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!");
    }
});

这是否有意义/帮助？我自己没有测试过，但它应该都可以工作。

使用JS逻辑从Custom Options构建URL链接

1 个答案: