我如何使用If / Loop语句

Ok so I am running 3 searches side by side threw and API when the user enters a title and hits search they all work fine.

好的,所以当用户输入标题并点击搜索它们都工作正常时,我正在运行3次搜索和API。

I have been asked however to allow the user to control what information is printed in what div (Left beaning first and far right beaning last)

然而,有人要求我允许用户控制在哪个div中打印哪些信息(左边是最后一个,最右边是最后一个)

By default I am just printing the information out into the 3 divs in the order of movies, tv and games.

默认情况下,我只是按照电影,电视和游戏的顺序将信息打印到3个div中。

Here is an example of the movie print out function as u can see it is being sent to pref 1 be defualt

这是一个电影打印输出功能的例子,你可以看到它被发送到pref 1是defualt

Movie sent to pref 1

电影发送到pref 1

success: function (data) {
    var table = '<table>';
    $.each(data.results, function (key, value) {
        table += '<tr><td class="results-img"><img src="http://image.tmdb.org/t/p/w500' + value.poster_path + '" alt="" width="150" height="200"></td><td class="results-title"><h3>' + value.original_title + '</h3></td><td class="results-date">' + value.release_date +
            '</td><td class="results-search-btn"><button class="search-btn" id="MoreInfo">Few More Info</button></td></tr>';
    });
    $('#pref1').html(table);
}

Tv sent to pref 2

电视发送到pref 2

success: function (data) {

    var table = '<table>';
    $.each(data.results, function (key, value) {
        table += '<tr><td class="results-img"><img src="http://image.tmdb.org/t/p/w500' + value.poster_path + '" alt="" width="150" height="200"></td><td class="results-title"><h3>' + value.original_name + '</h3></td><td class="results-date">' + value.first_air_date +
            '</td><td class="results-search-btn"><button class="search-btn" id="MoreInfo">Few More Info</button></td></tr>';
    });

    $('#pref2').html(table);
}

Games sent to pref 3

游戏发送到pref 3

window.gamer = function (data) {
    var table = '<table>';
    $.each(data.results, function (key, value) {
        var image = "";
        if (value.image) {
            // either icon_url,medium_url,screen_url,small_url,super_ur,thumb_url or tiny_url
            image = "<img src='" + value.image.thumb_url + "'/>";
        }
        table += '<tr><td>' + image + '</td><td td class="results-title"><h3>' + value.name + '</h3></td><td class="results-search-btn"><button class="search-btn" id="MoreInfo">Few More Info</button></td></tr>';
    });
    //This is where it tells it to print the content to 
    table += '</table>';
    $('#pref3').html(table);
}

I want to use 3 dropdown boxes to allow the user to decide what gets loaded where

我想使用3个下拉框来允许用户决定在哪里加载

<select>
    <option value="M">1</option>
    <option value="M">Movie</option>
    <option value="T">Tv</option>
    <option value="G">Games</option>
</select>
<select>
<option value="M">2</option>
    <option value="M">Movie</option>
    <option value="T">Tv</option>
    <option value="G">Games</option>
</select>
<select>
<option value="M">3</option>
    <option value="M">Movie</option>
    <option value="T">Tv</option>
    <option value="G">Games</option>
</select>

And here is the divs they go in

这是他们进入的div

<div id="container">
    <div id="pref1"></div>
    <div id="pref2"></div>
    <div id="pref3"></div>
</div>

a loop or if statement should do it I am just having problems writing them in and connecting the dropdown options.

一个循环或if语句应该这样做我只是在编写它们并连接下拉选项时遇到问题。

Any help is welcome

欢迎任何帮助

1 个解决方案

#1

If you give your selects ids according to what they should control, like this:

如果你根据他们应该控制的内容给出你的选择ID,就像这样:

<select id="pref1select">
    <option value="M">1</option>
    <option value="M">Movie</option>
    <option value="T">Tv</option>
    <option value="G">Games</option>
</select>
<select id="pref2select">
<option value="M">2</option>
    <option value="M">Movie</option>
    <option value="T">Tv</option>
    <option value="G">Games</option>
</select>
<select id="pref3select">
<option value="M">3</option>
    <option value="M">Movie</option>
    <option value="T">Tv</option>
    <option value="G">Games</option>
</select>

Then you can do this in all your functions: (Using your first movie function as an example)

然后你可以在所有功能中执行此操作:(以第一个电影功能为例)

success: function (data) {
    var table = '<table>';
    $.each(data.results, function (key, value) {
        table += '<tr><td class="results-img"><img src="http://image.tmdb.org/t/p/w500' + value.poster_path + '" alt="" width="150" height="200"></td><td class="results-title"><h3>' + value.original_title + '</h3></td><td class="results-date">' + value.release_date +
            '</td><td class="results-search-btn"><button class="search-btn" id="MoreInfo">Few More Info</button></td></tr>';
    });
    //**Here is my change** 
    if($('#pref1select').val() === "M") {
        $('#pref1').html(table);
    }
    if($('#pref2select').val() === "M") {
        $('#pref2').html(table);
    }
    if($('#pref3select').val() === "M") {
        $('#pref3').html(table);
    }
}

And similary for val() === "T" etc.

和val()===“T”等相似

#1