Question

HTML

 <div>
                     <input type='text' id='ccType' name='ccType'/>
            <ul style="list-style-type: none;" class="cards">
            <li class="visa"></li>
            <li class="visa_electron"></li>
            <li class="mastercard"></li>
            <li class="maestro"></li>                   
            </ul>
                 </div>

            <div class="form-group">
              <label class="control-label">Card Number</label>
            </div>



        <div class="fake-input">
               <input type="text" placeholder="Card Number" id="ccnumber" name="ccnumber" class="form-control"/>

        <img id="cc" src="" width=30 />
        </div>

我有这个html，其中有一个文本字段，当键入卡号时，它将检测其签名/ maestro / what的数量，并将值设置为ccType元素。我有一个javascript 的 JS

$( window ).load(function() {

$("#ccType").on('change', function () {
    var ccType = $(this).val();
    if (ccType == "visa") {

            $('#cc').attr('src', 'http://www.fethr.com/webapp/images/visa.png');
    }
    if (ccType == "maestro") {
        $('#cc').attr('src', 'http://www.fethr.com/webapp/images/maestro.png');
    }
    if (ccType == "mastercard") {
        $('#cc').attr('src', 'http://www.fethr.com/webapp/images/mastercard.png');
    }
    if (ccType == "visa_electron") {
        $('#cc').attr('src', 'http://www.fethr.com/webapp/images/visaelectron.png');
    }
})


 });

我在文本字段中设置图像。我有img和文本字段的以下css 的 CSS

.fake-input { position: relative;  }
.fake-input input { border:none: background:#fff; display:block; width: 100%; box-sizing: border-box }
.fake-input img { position: absolute; top: 9px; right: 5px }

但是图像脚本似乎没有用，或者我无法在文本字段中显示图像？任何帮助

FIDDLE

http://jsfiddle.net/tKVmt/

Answer 1

这是因为你把你的事件监听器放在一个window.load事件中，并且它在你的textfield在DOM中之前就已经被绑定了。

删除$( window ).load(function() {包装器或将其替换为DOM ready $(function() {并且它将起作用。

http://jsfiddle.net/tKVmt/2/

Answer 2

问题在于您将该功能作为$(window).load()

的参数

只需从$(window).load()中取出该方法，它就会按预期工作。

为什么图像不在我的文本字段中

2 个答案: