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

【问题标题】：Highlighting/selecting an image based on text entered in an textbox根据在文本框中输入的文本突出显示/选择图像
【发布时间】：2014-06-03 23:55:43
【问题描述】：

我正在寻找一个示例，其中根据在文本框中输入的输入选择/突出显示/稍微放大了多个图像。例如，在以下情况下，当输入信用卡号时，相应的徽标会被选中/突出显示。

|Visa|万事达卡||美国运通|Diners|

|________________________|

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

感谢任何指点。

干杯，

【问题讨论】：

标签： javascript jquery asp.net asp.net-mvc

【解决方案1】：

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

您希望为每张图片指定一个唯一的 ID 属性和一个类，这样您就可以同时为所有图片设置样式。例如：

编辑：有一些错误。必须传入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 块中的操作，例如换出图像等。

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

【讨论】：

【解决方案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");
            }
        }
    }

如果有人对如何改进代码有任何建议，我将不胜感激。

干杯，

【讨论】：