Question

嗨，大家好我正在制作2个网站，根据我已编程的阵列，徽标应该改变。我正在尝试使用JavaScript。

场地变量已经编程并正常工作，所以我只需要填写if语句下的部分。徽标都具有相同的类，因为它们将完全插入到同一位置，但显然会根据if语句为真而改变。

如何使用if语句处理图像？任何建议都会很棒。

这是我的代码：

<script type="text/javascript">
                //this not working yet changes the logo depending on the selected location
            if (venue = "london"){
            //SOMETHING TO OUTPUT PICTURE ?
            }
            else if (venue = "Manchester")
            {
                //SOMETHING TO OUTPUT PICTURE?

            </script>
                    //THIS IS MY IMAGES
                    <img class="logo1" src="image1"/>
                      <img class="logo1" src="image2"/>

Answer 1

在jQuery attr() 方法的帮助下，只需执行此类操作

<强>的jQuery

$('img.logo1').attr('src',venue=='london'?'image1':(venue=='Manchester'?'image2':''));

<小时/> 您也可以在评论

中按照Ismael Miguel的建议尝试以下方法

var imgs={london:'image1',manchester:'image2'};
$('img.logo1').attr('src',imgs[(venue+'').toLowerCase()]);

<强> HTML

<img class="logo1" src=""/>

Answer 2

使用比较运算符==代替赋值运算符=

Answer 3

您没有使用单个=来测试相等性。尝试更改

if (venue = "london"){
 //SOMETHING TO OUTPUT PICTURE ?
}
else if (venue = "Manchester")
{
 //SOMETHING TO OUTPUT PICTURE?

到

if (venue === "london"){
 //SOMETHING TO OUTPUT PICTURE ?
}
else if (venue === "Manchester")
{
 //SOMETHING TO OUTPUT PICTURE?

点击此链接：http://www.w3schools.com/js/js_comparisons.asp

Answer 4

你可以通过许多方式做到这一点。我推荐你的是为你的图像添加类，如下所示：

<强> HTML

<img class="logo1 hidden london" src="image1"/>
<img class="logo1 hidden manchester" src="image2"/>

<强> CSS

.hidden{display:none}

** JS *

if (venue == "london"){
   $('.london').removeClass('hidden'); 
}
else if (venue == "Manchester")
{
   $('.manchester').removeClass('hidden); 
}

根据IF，ELSE语句更改javascript徽标

4 个答案: