Question

有人使用工具后，如何显示图像？

基本上，您可以运行该工具来查看手机兼容的运营商。它目前非常简单，但是我希望在选择手机型号并运行该工具后显示图像。例如，您选择运营商以及您拥有的iPhone 7，我希望在iPhone 7运行后显示其图像。

我在Stackoverflow上尝试了一些示例，但是似乎没有任何用处，因为它们与构建方式有些不同。如果有人能指出正确的方向或向我展示该怎么做，那将是传奇。谢谢

function checkiPhoneCompatibility() {
    var wo$ = $;
    var carrier = wo$('#check-compatability-carrier').val();
    var phone = wo$('#check-compatability-phone').val();
    if (phone === '' || carrier === '') {
        wo$('#check-compatibility-message').html('Please select a carrier and phone model');
    } else {
        var networks = '';
        var search = '';
        switch (phone) {
            case '5X':
                if (carrier === 'att') {
                    networks = 'AT&T, T-Mobile, Sprint and Verizon';
                    search = '';
                }
                if (carrier === 'sprint') {
                    networks = 'Sprint, T-Mobile, Verizon and AT&T';
                    search = '';
                }
                if (carrier === 'verizon') {
                    networks = 'Verizon, T-Mobile, AT&T and Sprint';
                    search = '';
                }
                if (carrier === 'tmobile') {
                    networks = 'AT&T, Verizon, Sprint and T-Mobile';
                    search = '';
                }
                break;
            case 'Nexus':
                if (carrier === 'att') {
                    networks = 'AT&T, T-Mobile, Sprint and Verizon';
                    search = '';
                }
                if (carrier === 'sprint') {
                    networks = 'Sprint, T-Mobile, Verizon and AT&T';
                    search = '';
                }
                if (carrier === 'verizon') {
                    networks = 'Verizon, T-Mobile, AT&T and Sprint';
                    search = '';
                }
                if (carrier === 'tmobile') {
                    networks = 'T-Mobile, Verizon, Sprint and AT&T';
                    search = '';
                }
                break;
            case '6P':
                if (carrier === 'att') {
                    networks = 'AT&T, T-Mobile, Sprint and Verizon';
                    search = '';
                }
                if (carrier === 'sprint') {
                    networks = 'Sprint, T-Mobile, Verizon and AT&T';
                    search = '';
                }
                if (carrier === 'verizon') {
                    networks = 'Verizon, T-Mobile, AT&T and Sprint';
                    search = '';
                }
                if (carrier === 'tmobile') {
                    networks = 'T-Mobile, Verizon, Sprint and AT&T';
                    search = '';
                }
                break;
            case 'Pixel':
                if (carrier === 'att') {
                    networks = 'AT&T, T-Mobile, Sprint and Verizon';
                    search = '';
                }
                if (carrier === 'sprint') {
                    networks = 'Sprint, T-Mobile, Verizon and AT&T';
                    search = '';
                }
                if (carrier === 'verizon') {
                    networks = 'Verizon, T-Mobile, AT&T and Sprint';
                    search = '';
                }
                if (carrier === 'tmobile') {
                    networks = 'T-Mobile, Verizon, Sprint and AT&T';
                    search = '';
                }
                break;
            case '530':
                if (carrier === 'att') {
                    networks = 'AT&T, T-Mobile, Sprint and Verizon';
                    search = '';
                }
                if (carrier === 'sprint') {
                    networks = 'Sprint, T-Mobile, Verizon and AT&T';
                    search = '';
                }
                if (carrier === 'verizon') {
                    networks = 'Verizon, T-Mobile, AT&T and Sprint';
                    search = '';
                }
                if (carrier === 'tmobile') {
                    networks = 'T-Mobile, Verizon, Sprint and AT&T';
                    search = '';
                }
                break;
            case '626s':
                if (carrier === 'att') {
                    networks = 'AT&T, T-Mobile, Sprint and Verizon';
                    search = '';
                }
                if (carrier === 'sprint') {
                    networks = 'Sprint, T-Mobile, Verizon and AT&T';
                    search = '';
                }
                if (carrier === 'verizon') {
                    networks = 'Verizon, T-Mobile, AT&T and Sprint';
                    search = '';
                }
                if (carrier === 'tmobile') {
                    networks = 'T-Mobile, Verizon, Sprint and AT&T';
                    search = '';
                }
                break;
            case '7':
                if (carrier === 'att') {
                    networks = 'AT&T, T-Mobile, Sprint and Verizon';
                    search = '';
                }
                if (carrier === 'sprint') {
                    networks = 'Sprint, T-Mobile, Verizon and AT&T';
                    search = '';
                }
                if (carrier === 'verizon') {
                    networks = 'Verizon, T-Mobile, AT&T and Sprint';
                    search = '';
                }
                if (carrier === 'tmobile') {
                    networks = 'T-Mobile, Verizon, Sprint and AT&T';
                    search = '';
                }
                break;
            case '6s':
                if (carrier === 'att') {
                    networks = 'AT&T, T-Mobile, Sprint and Verizon';
                    search = '';
                }
                if (carrier === 'sprint') {
                    networks = 'Sprint, T-Mobile, Verizon and AT&T';
                    search = '';
                }
                if (carrier === 'verizon') {
                    networks = 'Verizon, T-Mobile, AT&T and Sprint';
                    search = '';
                }
                if (carrier === 'tmobile') {
                    networks = 'T-Mobile, Verizon, Sprint and AT&T';
                    search = '';
                }
                break;
            default:
                networks = 'AT&T, Sprint, T-Mobile, and Verizon';
                break;
        }
        wo$('#check-compatibility-icon, #check-compatibility-search').removeClass('hidden');
        wo$('#check-compatibility-message').html('Your unlocked phone is compatible with these networks: <strong>' + networks + '</strong>');
        wo$('#check-compatibility-search a').attr('href', '/CellPhones/Search?simonly=true' + search);
    }
    wo$('#check-compatibility-message-wrapper').removeClass('hidden');
    if (wo$('body[data-frame-amp]').length > 0) {
        window.parent.postMessage({
            sentinel: 'amp',
            type: 'embed-size',
            height: document.body.scrollHeight
        }, '*');
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-content-amp="Phone_Compatability_Checker">
<div class="well pad-y-0 mar-b-0">
    <div class="row pad-y-4 bor-b-1">
        <div class="col-xs-24">
            <div class="font-7">Phone Compatibility Tool</div>
        </div>
    </div>
    <div class="row pad-y-4 bor-b-1">
        <div class="col-md-12 col-lg-9"><strong>1)&nbsp;Which network&nbsp;did you purchase your phone from?</strong></div>
        <div class="col-md-10">
            <select id="check-compatability-carrier" tabindex="-1" class="selectpicker pad-t-4-xs pad-t-4-sm" title="Select a carrier" data-width="100%">
                <option value="att">AT&T</option>
                <option value="sprint">Sprint</option>
                <option value="tmobile">T-Mobile</option>
                <option value="verizon">Verizon</option>
            </select>
        </div>
    </div>
    <div class="row pad-y-4 bor-b-1">
        <div class="col-md-12 col-lg-9"><strong>2)&nbsp;Which phone model did you purchase?</strong></div>
        <div class="col-md-10">
            <select id="check-compatability-phone" tabindex="-1" class="selectpicker pad-t-4-xs pad-t-4-sm" title="Select Your Phone Model" data-width="100%">
                <option value="5X">Google Nexus 5x</option>
                <option value="Nexus">Google Nexus 6</option>
                <option value="6P">Google Nexus 6P</option>
                <option value="Pixel">Google Pixel</option>
                <option value="530">HTC Desire 530</option>
                <option value="626s">HTC Desire 626s</option>
                <option value="7">iPhone 7 or iPhone 7 Plus</option>
                <option value="6s">iPhone 6s or iPhone 6s Plus</option>
                <option value="6">iPhone 6 or iPhone 6 Plus</option>
                <option value="se">iPhone SE</option>
                <option value="5s5c">iPhone 5s or iPhone 5c</option>
                <option value="5">iPhone 5</option>
                <option value="4">iPhone 4s or iPhone 4</option>
                <option value="Stylo">LG Stylo</option>
                <option value="Stylo2">LG Stylo 2, Stylo 2 Plus</option>
                <option value="K7">LG K7</option>
                <option value="K10">LG K10</option>
                <option value="V20">LG V20</option>
                <option value="G5">LG G5</option>
                <option value="Escape3">LG Escape 3</option>
                <option value="ELTE">Motorola Moto E, Moto E LTE</option>
                <option value="G4">Motorola Moto G4 Play</option>
                <option value="S7">Samsung Galaxy S7 or S7 Edge</option>
                <option value="S6">Samsung Galaxy S6, S6 Edge, S6 Edge +</option>
                <option value="S5">Samsung Galaxy S5</option>
                <option value="S4">Samsung Galaxy S4 or S4 Zoom</option>
                <option value="S3">Samsung Galaxy S3 or S3 Mini</option>
                <option value="Note">Samsung Galaxy Note 5, 4, 3, 2</option>
                <option value="Grand">Samsung Galaxy Grand Prime</option>
                <option value="Core">Samsung Galaxy Core Prime</option>
                <option value="J3">Samsung Galaxy J3</option>
                <option value="ZMax">ZTE Z Max Pro</option>
                <option value="GMax">ZTE Grand Max</option>
            </select>
        </div>
    </div>
    <div class="row pad-y-4">
        <div class="col-sm-9 col-md-offset-9">
            <button id="check-compatibility-button" type="button" class="btn btn-primary" onclick="checkiPhoneCompatibility();">Check Compatibility</button>
        </div>
    </div>
    <div class="row pad-y-4 bor-t-1 hidden" id="check-compatibility-message-wrapper">
        <div class="col-md-19 col-md-offset-6 font-5">
            <div class="col-sm-4 col-md-4 hidden-xs hidden-sm"><span id="check-compatibility-icon" class="fa fa-check c-green font-10 align-top hidden"></span></div>
            <div class="col-sm-20 col-md-16 pad-l-2-sm pad-l-2-md pad-l-0-lg">
                <div id="check-compatibility-message" class="mar-t-0 pad-t-0"></div>
                <p id="check-compatibility-search" class="hidden">
                    <a href="javascript:;"><strong>Search plans now</strong></a>
                </p>
            </div>
        </div>
    </div>
</div>

Answer 1

设置一个空图像div并根据用户输入将其设置为src属性。

If(phone=="iphone7"){
$("#img").attr("src","iphone7.png");
}

Answer 2

您可以检查false的值，然后从带有图像源的Javascript对象中检索该值。

select

$(function(){
    var phoneImgs = {Nexus: "https://upload.wikimedia.org/wikipedia/commons/thumb/6/6b/Nexus_6P.png/300px-Nexus_6P.png", Pixel: "https://www.jbhifi.com.au/FileLibrary/ProductResources/Images/191637-L-LO.jpg"};
    phoneImgs["5X"] = "https://i-cdn.phonearena.com/images/phones/56080-specs/Google-Nexus-5X.jpg";
    phoneImgs["6P"] = "https://images-na.ssl-images-amazon.com/images/I/81VK5hbPjzL._SL1500_.jpg";
    phoneImgs["530"] = "https://cf4.s3.souqcdn.com/item/2016/03/16/10/29/91/30/item_XL_10299130_13050439.jpg";
    phoneImgs["626s"] = "https://cdn2.gsmarena.com/vv/pics/htc/htc-desire-626s-5.jpg";
    phoneImgs["7"] = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTj8onnlgiZCKhdX2naEQQFNt0EjqrRQU1FFNEJgQym-vfsYeYe";
    phoneImgs["6s"] = "https://images-na.ssl-images-amazon.com/images/I/71f2M-HuP4L._SL1500_.jpg";
    phoneImgs["6"] = "https://cdn2.gsmarena.com/vv/bigpic/apple-iphone-6-4.jpg";
    phoneImgs["se"] = "https://ss7.vzw.com/is/image/VerizonWireless/apple_iPhoneSE_Svr?$device-lg$";
    phoneImgs["5s5c"] = "https://cdn2.gsmarena.com/vv/bigpic/apple-iphone-5s-ofic.jpg";
    phoneImgs["5"] = "https://drop.ndtv.com/TECH/product_database/images/530201393615PM_635_apple_iphone_5.png";
    phoneImgs["4"] = "https://support.apple.com/library/APPLE/APPLECARE_ALLGEOS/SP643/sp643_iphone4s_color_white.jpg";
    phoneImgs["Stylo"] = "https://ss7.vzw.com/is/image/VerizonWireless/lg-stylo-2-v-pdp-key-features-2-d?&bgc=f6f6f6&scl=1&scl=2";
    phoneImgs["Stylo2"] = "https://cdn2.gsmarena.com/vv/bigpic/lg-stylo2-1.jpg";
    phoneImgs["K7"] = "https://cdn2.gsmarena.com/vv/bigpic/lg-k7.jpg";
    phoneImgs["K10"] = "https://cdn2.gsmarena.com/vv/pics/lg/lg-k10-1.jpg";
    phoneImgs["V20"] = "https://www.lg.com/us/images/cell-phones/md05779514/gallery/medium01.jpg";
    phoneImgs["G5"] = "https://cdn2.gsmarena.com/vv/bigpic/lg-g5.jpg";
    phoneImgs["Escape3"] = "https://images-na.ssl-images-amazon.com/images/I/31Budda2dfL._SL500_AC_SS350_.jpg";
    phoneImgs["ELTE"] = "https://cdn2.gsmarena.com/vv/bigpic/motorola-moto-e-2015.jpg";
    phoneImgs["G4"] = "https://i-cdn.phonearena.com/images/phones/62819-specs/Motorola-Moto-G4-Play.jpg";
    phoneImgs["S7"] = "https://images.samsung.com/is/image/samsung/in-galaxy-s7-g930fd-sm-g930fzduins-000000001-front-gold?$PD_GALLERY_JPG$";
    phoneImgs["S6"] = "https://drop.ndtv.com/TECH/product_database/images/312015113532PM_635_samsung_galaxy_s6_gold_platinum.jpeg";
    phoneImgs["S5"] = "https://s7d2.scene7.com/is/image/SamsungUS/Pdpkeyfeature-sm-g900pzwabst-600x600-C1-062016?$product-details-jpg$";
    phoneImgs["S4"] = "https://s7d2.scene7.com/is/image/SamsungUS/Pdpkeyfeature-sgh-i337zwaatt-600x600-C1-062016?$product-details-jpg$";
    phoneImgs["S3"] = "https://drop.ndtv.com/TECH/product_database/images/5292013114707PM_635_samsung_galaxy_s_III.png";
    phoneImgs["Note"] = "https://images.samsung.com/is/image/samsung/in-galaxy-note-5-n9208-sm-n9208zdvins-000000001-front-gold?$PD_GALLERY_JPG$";
    phoneImgs["Grand"] = "https://images.samsung.com/is/image/samsung/pk-galaxy-grand-prime-plus-g532f-sm-g532fzkdpak-000000001-front-black?$PD_GALLERY_L_JPG$";
    phoneImgs["Core"] = "https://s7d2.scene7.com/is/image/SamsungUS/Pdpkeyfeature-sm-s820lhaatfn-600x600-C1-062016?$product-details-jpg$";
    phoneImgs["J3"] = "https://drop.ndtv.com/TECH/product_database/images/515201752004PM_635_samsung_galaxy_j3_2017.jpeg";
    phoneImgs["ZMax"] = "https://cdn2.gsmarena.com/vv/pics/zte/ZTE-ZMax-Pro-5.jpg";
    phoneImgs["GMax"] = "https://d28dq596ebml6z.cloudfront.net/media/catalog/product/cache/1/image/400x506.32911392405/9df78eab33525d08d6e5fb8d27136e95/z/7/z787_reflections.png";
     document.getElementById("check-compatability-phone").addEventListener("change", function(e){
      $('#phoneImg').show();
      var phone = this.value;
      $('#phoneImg').prop('src', phoneImgs[phone]);
     });
    });

#phoneImg{
      display: none;
    }

如何使用if / else语句显示图像？

2 个答案: