在创建导致图像显示的按钮时修改javascript时出现问题

时间:2014-05-28 00:47:20

标签: javascript html

我是初学者,希望得到一些帮助,看看我犯了什么错误。目前javascript使得一旦你选择“载体”按钮和“容量”按钮,iPhone的图像就显示出来了。

我一直在尝试修改javascript,因此您只需点击“运营商”按钮即可显示iPhone的图像。我花了好几个小时试图找到一个解决方案,但我刚刚开始自学如何编码并花了很多时间来解决这个问题。

我感谢您的帮助,提前谢谢!

在选择按钮之前: enter image description here

选择按钮后: enter image description here

JS:

var selectedGB;
var selectedCarrier;
var displayCarrier;

$(document).ready(function() {
$('.home-rt').hide();

$('.gb-button').each(function() {
$(this).click(function() {
$('.gb-button').removeClass('gb-button-selected');
console.log($(this).val());
selectedGB = $(this).val().slice(0,-2);
$(this).addClass('gb-button-selected');
                            updateCDisplay();
                        });
                    });
$('.carrier-button').each(function() {
$(this).click(function() {
$('.carrier-button').removeClass('carrier-button-selected');

$('.home-rt').hide();
if ( $(this).hasClass('carrier-ATT') ) {
                                        selectedCarrier = 'ATT';
                                    } else if ( $(this).hasClass('carrier-Sprint') ) {
                                        selectedCarrier = 'Sprint';
                                    } else if ( $(this).hasClass('carrier-Verizon') ) {
                                        selectedCarrier = 'Verizon';
                                    } else if ( $(this).hasClass('carrier-Rogers') ) {
                                        selectedCarrier = 'Rogers';
                                    } else if ( $(this).hasClass('carrier-Fido') ) {
                                        selectedCarrier = 'Fido';
                                    } else if ( $(this).hasClass('carrier-Cricket') ) {
                                        selectedCarrier = 'Cricket';
                                    } else if ( $(this).hasClass('carrier-Unlocked') ) {
                                        selectedCarrier = 'Unlocked';
                                    } else if ( $(this).hasClass('carrier-T-Mobile') ) {
                                        selectedCarrier = 'TMobile';
                                    } else if ( $(this).hasClass('carrier-Wi-Fi') ) {
                                        selectedCarrier = 'WiFi';
                                    } else {
                                        selectedCarrier = 'Other';
                                    } 

                                    if (selectedCarrier == "ATT") {
                                        displayCarrier = "AT&T";
                                    } else {
                                    displayCarrier = selectedCarrier;
                                    }
                                $(this).addClass('carrier-button-selected');
                                updateCDisplay();
                            });
                        $('.price-button').each(function() {
                            $(this).click(function() {
                                $('.price-button').removeClass('price-button-selected');
                                selectedPrice = $(this).val();
                                $(this).addClass('price-button-selected');
                                updateCDisplay();
                            });
                        });

                    });
                });

                function updateCDisplay() {

                    $('.home-rt').hide();
                    if (selectedCarrier && selectedGB){

                                        $("#deviceLink").attr("href", "/sell/price/"+device+"/"+model+"/"+selectedCarrier+"/"+selectedGB);
                                        $("#deviceText").attr("href", "/sell/price/"+device+"/"+model+"/"+selectedCarrier+"/"+selectedGB);
                                        $("#deviceText").html(device + " " + model + "<br/>" + selectedGB + "GB" + " " + displayCarrier);
                                        $("#dealer").attr("action", "/sell/price/"+device+"/"+model+"/"+selectedCarrier+"/"+selectedGB);
                                        $("#private").attr("action", "/sell/private/"+device+"/"+model+"/"+selectedCarrier+"/"+selectedGB);
                                        $("#displayImage").attr("src", "images/specs_"+device+"_"+model+".jpg");
                                        $(".selectedView").show();
                    }
                }



<div style="text-align:center;margin:10px 0 20px 0;"><!---<img src="/images/test.jpg"/>-->
<div style="font-size:16px">Choose Your Carrier:</div>

<div><!--<input class="carrier-button carrier-all carrier-button-selected " type="button">--><input class="carrier-button carrier-ATT" type="button" /> <input class="carrier-button carrier-Verizon" type="button" /><input class="carrier-button carrier-Sprint" type="button" /> <input class="carrier-button carrier-T-Mobile" type="button" /> <input class="carrier-button carrier-Unlocked" type="button" /></div>
</div>

<div style="text-align:center;margin:10px 0 20px 0;">
<div style="font-size:16px">Choose Your Capacity:</div>

<div>
<p><!--<input class="gb-button gb-button-selected " value="ALL" type="button">--><input class="gb-button" type="button" value="16GB" /> <input class="gb-button" type="button" value="32GB" /> <input class="gb-button" type="button" value="64GB" /></p>
</div>
</div>
<script>
var device = "iPhone";
var model = "5S";
</script><script type="text/javascript" src="js/specs.js"></script>

1 个答案:

答案 0 :(得分:1)

js/specs.js中说:

if (selectedCarrier && selectedGB){

尝试将其设为:

if (selectedCarrier)