javascript - 根据下拉列表的值显示单选按钮？

Question

我想根据下拉列表的值显示两个或更多单选按钮。对于某些值，我不想显示单选按钮。

我将如何去做这件事。我尝试了不同的东西，但 javascript/Jquery 不是我最好的。尝试查看不同的堆栈帖子，但没有一个对我有帮助。

JS 代码片段

var imageObject, index, len, selector, fontLoaded = false,
    imageLoaded = false;
WebFont.load({
    google: {
        families: ['Oswald']
    },
    active: function() {
        fontLoaded = true;
        if (imageLoaded) {
            draw(ctx, leftColor, rightColor, font, textColor, text, image, textSize, textVertAlign);
        }
    },
});
var leftColor = "rgb(35, 184, 94)",
    rightColor = "rgb(16, 18, 32)",
    font = "Oswald",
    textColor = "#FFF",
    text = "Battle.net",
    textSize = 50,
    textVertAlign = 40,
    image = "image1",
    canvas, canvasHeight = 95,
    ctx;
var colorPalette = [
    ["#fff", "#000"],
    ["#1abc9c", "#16a085", "#2ecc71", "#27ae60"],
    ["#3498db", "#2980b9", "#9b59b6", "#8e44ad"],
    ["#f1c40f", "#f39c12", "#e67e22", "#d35400"],
    ["#ecf0f1", "#95a5a6", "#bdc3c7", "#7f8c8d"]
];
var imageLocation = "./img/icons/";
var images = {
    "Battle.net": imageLocation + "battlenet.png",
    "Chat": imageLocation + "chat.png",
    "Computer": imageLocation + "computer.png",
    "Controller": imageLocation + "controller.png",
    "Crown": imageLocation + "crown.png",
    "Deviant Art": imageLocation + "deviantart.png",
    "Discord": imageLocation + "discord.png",
    "Exclamation Mark": imageLocation + "exclamation.png",
    "Extra  Life": imageLocation + "extralife.png",
    "Facebook": imageLocation + "facebook.png",
    "Gamewisp": imageLocation + "gamewisp.png",
    "G2A": imageLocation + "g2a.png",
    "Heart": imageLocation + "heart.png",
    "Instagram": imageLocation + "instagram.png",
    "Keyboard": imageLocation + "keyboard.png",
    "Money": imageLocation + "money.png",
    "Mouse": imageLocation + "mouse.png",
    "Music Notes": imageLocation + "musicnotes.png",
    "Network Icon": imageLocation + "network.png",
    "Nerd or Die": imageLocation + "nod.png",
    "Patreon": imageLocation + "patreon.png",
    "Paypal": imageLocation + "paypal.png",
    "Playstation": imageLocation + "psn.png",
    "Plays.tv": imageLocation + "playstv.png",
    "Plus": imageLocation + "plus.png",
    "Pokemon": imageLocation + "pokeball.png",
    "Question Mark": imageLocation + "questionmark.png",
    "Robot": imageLocation + "robot.png",
    "Schedule": imageLocation + "schedule.png",
    "Snapchat": imageLocation + "snapchat.png",
    "Star": imageLocation + "star.png",
    "Steam": imageLocation + "steam.png",
    "Team Speak": imageLocation + "teamspeak.png",
    "Thumbs Up": imageLocation + "thumbsup.png",
    "Trophy": imageLocation + "trophy.png",
    "Tumblr": imageLocation + "tumblr.png",
    "Twitch": imageLocation + "twitch.png",
    "Twitter": imageLocation + "twitter.png",
    "Uplay": imageLocation + "uplay.png",
    "Wishlist - Amazon": imageLocation + "amazon.png",
    "Xbox": imageLocation + "xbox.png",
    "YouTube": imageLocation + "youtube.png"
};
var keys = Object.keys(images);
for (index = 0, len = keys.length; index < len; index++) {
    var temp = keys[index];
    var newoption = new Option(temp, images[temp]);
    document.getElementById('imagelist').add(newoption);
}

function init() {
    canvas = document.getElementById("canvas");
    ctx = canvas.getContext("2d");
    selector = document.getElementById("imagelist");
    changeImage();
    selector.addEventListener("change", changeImage);
    $("#leftColorInput").spectrum({
        color: leftColor,
        showInput: true,
        className: "full-spectrum",
        showInitial: true,
        showPalette: true,
        showSelectionPalette: true,
        maxSelectionSize: 10,
        preferredFormat: "hex",
        localStorageKey: "spectrum.demo",
        palette: colorPalette,
        move: function(color) {
            leftColor = color.toHexString();
            draw(ctx, leftColor, rightColor, font, textColor, text, image, textSize, textVertAlign);
        },
        change: function(color) {
            leftColor = color.toHexString();
            draw(ctx, leftColor, rightColor, font, textColor, text, image, textSize, textVertAlign);
        }
    });
    $("#rightColorInput").spectrum({
        color: rightColor,
        showInput: true,
        className: "full-spectrum",
        showInitial: true,
        showPalette: true,
        showSelectionPalette: true,
        maxSelectionSize: 10,
        preferredFormat: "hex",
        localStorageKey: "spectrum.demo",
        palette: colorPalette,
        move: function(color) {
            rightColor = color.toHexString();
            draw(ctx, leftColor, rightColor, font, textColor, text, image, textSize, textVertAlign);
        },
        change: function(color) {
            rightColor = color.toHexString();
            draw(ctx, leftColor, rightColor, font, textColor, text, image, textSize, textVertAlign);
        }
    });
    $("#textColorInput").spectrum({
        color: textColor,
        showInput: true,
        className: "full-spectrum",
        showInitial: true,
        showPalette: true,
        showSelectionPalette: true,
        maxSelectionSize: 10,
        preferredFormat: "hex",
        localStorageKey: "spectrum.demo",
        palette: colorPalette,
        move: function(color) {
            textColor = color.toHexString();
            draw(ctx, leftColor, rightColor, font, textColor, text, image, textSize, textVertAlign);
        },
        change: function(color) {
            textColor = color.toHexString();
            draw(ctx, leftColor, rightColor, font, textColor, text, image, textSize, textVertAlign);
        }
    });
}

function changeImage() {
    imageURL = selector.value;
    imageObject = new Image();
    imageObject.onload = function() {
        imageLoaded = true;
        if (fontLoaded) {
            draw(ctx, leftColor, rightColor, font, textColor, text, image, textSize, textVertAlign);
        }
    };
    imageObject.src = imageURL;
}

function setLeftColor(color) {
    leftColor = color;
    draw(ctx, leftColor, rightColor, font, textColor, text, image, textSize, textVertAlign);
}

function setRightColor(color) {
    rightColor = color;
    draw(ctx, leftColor, rightColor, font, textColor, text, image, textSize, textVertAlign);
}

function setText(textInput) {
    text = textInput;
    draw(ctx, leftColor, rightColor, font, textColor, text, image, textSize, textVertAlign);
}

function setFont(fontInput) {
    font = fontInput;
    draw(ctx, leftColor, rightColor, font, textColor, text, image, textSize, textVertAlign);
}

function setTextSize(textSizeInput) {
    textSize = textSizeInput;
    draw(ctx, leftColor, rightColor, font, textColor, text, image, textSize, textVertAlign);
    var rangeNumber = document.getElementById("textRangeNumber");
    rangeNumber.innerHTML = textSize;
}

function setTextVertSize(textVertSizeInput) {
    textVertAlign = textVertSizeInput;
    draw(ctx, leftColor, rightColor, font, textColor, text, image, textSize, textVertAlign);
    var rangeNumber = document.getElementById("textVertRangeNumber");
    rangeNumber.innerHTML = textVertAlign;
}

function changeCanvasSize(canvasSize) {
    canvasHeight = canvasSize;
    draw(ctx, leftColor, rightColor, font, textColor, text, image, textSize, textVertAlign);
    if (canvasHeight == 80) {
        $("#hidePadding").show();
    } else if (canvasHeight == 95) {
        $("#hidePadding").hide();
    }
}

function draw(ctx, lcolor, rcolor, panelfont, fontcolor, paneltext, icon, panelsize, vertalign) {
    ctx.canvas.width = 320;
    ctx.canvas.height = canvasHeight;
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
    ctx.beginPath();
    ctx.moveTo(80, 80);
    ctx.lineTo(0, 80);
    ctx.lineTo(0, 0);
    ctx.lineTo(80, 0);
    ctx.lineTo(80, 80);
    ctx.closePath();
    ctx.fillStyle = lcolor;
    ctx.fill();
    ctx.closePath();
    ctx.beginPath();
    ctx.moveTo(320, 80);
    ctx.lineTo(80, 80);
    ctx.lineTo(80, 0);
    ctx.lineTo(320, 0);
    ctx.lineTo(320, 80);
    ctx.closePath();
    ctx.fillStyle = rcolor;
    ctx.fill();
    ctx.closePath();
    ctx.save();
    ctx.font = panelsize + "px '" + panelfont + "'";
    ctx.fillStyle = fontcolor;
    ctx.textBaseline = "middle";
    ctx.fillText(paneltext, 90, vertalign);
    ctx.restore();
    ctx.save();
    ctx.drawImage(imageObject, 0, 0);
    ctx.restore();
}
$(window).resize(function() {
    var ww = $(window).width();
    if (ww < 700) {
        $("#appContainer .input-col").removeClass("col-xs-4 col-xs-6");
        $("#appContainer .input-col").addClass("col-xs-12");
        console.log("Smaller");
    } else if (ww >= 700) {
        console.log("Bigger");
    }
});

function download() {
    var fileName = $("#fileName").val().replace(/[^a-z0-9+\s]+/gi, '');
    var canvas = document.getElementById("canvas"),
        ctx = canvas.getContext("2d");
    canvas.toBlob(function(blob) {
        saveAs(blob, fileName + ".png");
    });
}
window.onload = init();

Answer 1

一种可能的方法是在下拉框的更改上放置一个事件监听器。然后根据下拉值的不同，根据需要隐藏/显示单选按钮。

就我个人而言，我会跳过自己做这件事，并使用某种 View 模型设置来为您完成这一切。我最近一直在使用淘汰赛，发现效果非常好。