javascript - 如何使用 If/Loop 语句

Question

好的，当用户输入标题并点击搜索时，我并排运行 3 个搜索和 API，它们都工作正常。

然而，我被要求允许用户控制在什么 div 中打印什么信息(左 beaning 在前，最右 beaning 最后)

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

这是电影打印输出功能的示例，您可以看到它被默认发送到 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);
}

电视发送到 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);
}

发送到 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);
}

我想使用 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>

这是他们进入的 div

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

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

欢迎任何帮助

Answer 1

如果你根据他们应该控制的内容给你的选择 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>

然后你可以在你所有的函数中这样做:(以你的第一个电影函数为例)

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);
    }
}

与 val() === "T"等类似