Question

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

然而，有人要求我允许用户控制在哪个div中打印哪些信息（左边是第一个，最右边是最后一个）。

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

以下是电影打印输出功能的一个示例，因为你可以看到它被发送到pref 1是defualt

电影发送到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（）相似===＆＃34; T＆＃34;等

我如何使用If / Loop语句

1 个答案: