Question

我有这个HTML

<div class="fake-input">
               <input type="text" data-theme="a" placeholder="Card Number" id="ccnumber" name="ccnumber" class="textBox input tokenex_data" data-form="ui-body-a" />

        <img id="cc" src="http://www.zermatt-fun.ch/images/mastercard.jpg" width=30 />
        </div>

  <div class="form-group" style="margin-left:0px">
                <input type='hidden' id='ccType' name='ccType'/>
            <ul class="cards">
            <li class="visa">Visa</li>
            <li class="visa_electron">Visa Electron</li>
            <li class="mastercard">MasterCard</li>
            <li class="maestro">Maestro</li>                   
            </ul>
              </div>

依赖于隐藏输入字段ccType的值，我想更改图像src。下面的代码在语法上是不正确的，它只是一个演示和我试图做的原始想法

if (ccType=="visa")
{
change the image src to 'www.xyz.com/visa.png'
}
if( ccType=="maestro")
{
change image src to 'www.xyz.com/masestro/png'
}

里面的src

    <img id="cc" src="http://www.zermatt-fun.ch/images/mastercard.jpg" width=30 />

应该改变

我试图用javascript做这件事。这是我的小提琴

http://jsfiddle.net/DMx8a/

Answer 1

使用.attr()，它为匹配元素集设置属性。

 $('#cc').attr('src', 'www.xyz.com/visa.png')

代码

if (ccType=="visa")
{
    $('#cc').attr('src', 'www.xyz.com/visa.png');
}
if( ccType=="maestro")
{
    $('#cc').attr('src', 'www.xyz.com/masestro/png');
}

DEMO

修改

$("#ccnumber").on('blur', function () {
    var ccType = $(this).val();
    if (ccType == "visa") {
        $('#cc').attr('src', 'http://i.stack.imgur.com/aMCHQ.png?s=32&g=1');
    }
    if (ccType == "maestro") {
        $('#cc').attr('src', 'https://www.gravatar.com/avatar/9edb7a1c14bbcbeaa16bd9149764c3c6?s=32&d=identicon&r=PG&f=1');
    }
})

在ccnumber文本框中使用模糊事件

DEMO

Answer 2

或者只是常规JS：

var image = document.getElementById("cc");
if (ccType=="visa")
{
    //change the image src to 'www.xyz.com/visa.png'
    image.src = 'www.xyz.com/visa.png'
}
if( ccType=="maestro")
{
    //change image src to 'www.xyz.com/masestro/png'
    image.src = 'www.xyz.com/masestro/png'
}

Answer 3

如果您使用普通的javascript，请执行以下操作： document.getElementById('cc').setAttribute('src', 'www.xyz.com/visa.png');。

喜欢：

var imageElement = document.getElementById('cc');
if (ccType=="visa"){imageElement.setAttribute('src','www.xyz.com/visa.png');}
if( ccType=="maestro"){imageElement.setAttribute('src', 'www.xyz.com/masestro/png');}

使用javascript根据元素值更改图像src

3 个答案:

修改