Question

我正在寻找一个样本，其中根据在文本框中输入的输入选择/突出显示/略微缩放几个图像。例如，在下面的情况下，当输入信用卡号时，相应地选择/突出显示适当的标识。

|签证|万事达||美国运通|大来| ＆lt; ==图片

|的 ________________________ | ＆lt; ==卡号文本框

我自己不是前端开发人员，但我认为JavaScript / jQuery是实现上述功能的正确技术？该页面是用ASP.NET MVC编写的。

我感谢任何指针。

干杯，

Answer 1

你可以做一些简单的事情，就像在图像周围添加一个小边框一样。您可以通过起始号码检测卡片类型... 5是万事达卡... 4是签证等，并突出显示相应的图像。

您希望为每个图像提供唯一的ID属性和类，以便您可以一次设置所有图像的样式。例如：

编辑：有一些错误。不得不传入身份证。校正。

<img id="mc" class="cc" src="mastercard.jpg" /> <img id="visa" class="cc" src="visa.jpg" /> <input id="ccno" type="text" oninput="checkCCNo('ccno');" />

你的css可能是：

.cc { display: inline-block; margin: 5px; }

您的JavaScript将是：

function checkCCNo(id){ var cardimg; var source = document.getElementById(id); switch (source.value.substring(0,1)){ case "4": cardimg = document.getElementById("visa"); break; case "5": cardimg = document.getElementById("mc"); break; } if(cardimg) { cardimg.style.borderStyle = "solid"; cardimg.style.borderColor = "red"; cardimg.style.borderWidth = "2px"; } }

只需添加更多案例即可添加其他卡片。如果您不想增加要突出显示的边框，只需更改在最后一个if块中执行的操作，例如换出图像等。

如果您愿意，也可以使用此功能对卡号进行一些验证。

Answer 2

非常感谢！

这是我最终做的事情。认为它可能对其他人有用。

        function checkCCNo() {
        var cardimg;
        var cctx = document.getElementById("ccno");
        switch (cctx.value.substring(0, 1)) {
        case "4":
            cardimg = document.getElementById("visa");
            break;
        case "5":
            cardimg = document.getElementById("mastercard");
            break;
        }
        if (cardimg) { // Highlight the approprite credit card image
            $(cardimg).css({ "background-color": "", "opacity": "" });
            $(cardimg).css("border", "solid 2px silver");
            $(cardimg).animate({ width: "40px" }, "fast");
        }
        // Fade out the other credit card images
        var cardimgArr = ["visa", "mastercard"];
        for (var i = 0; i < cardimgArr.length; i++) {
            var image = "#" + cardimgArr[i];
            if (cardimg == undefined || cardimg.id != $(image).attr("id")) {
                $(image).css("border", "none");
                $(image).animate({ width: "36px", opacity: 0.5 }, "fast");
            }
        }
    }

如果有人对如何改进代码有任何建议，我很感激听到它。

干杯，

根据在文本框中输入的文本突出显示/选择图像

2 个答案: