1
私のドロップダウンの値に応じて2つ以上のラジオボタンを表示したい。いくつかの価値についてはラジオボタンを表示したくありません。ドロップダウンの値に応じてラジオボタンを表示しますか？
どうすればこのようになるでしょうか。私は別のものを試したが、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();
どのようにしてそれをやり始めますか？私はjavascript/jqueryの経験がありませんし、Googleを検索してチュートリアルを見て、このほとんどを行っています。しかし、私はドロップダウンで何も見つけることができません。 – BPrepper
http://api.jquery.com/on/ $（ "＃DROPDOWNID"）を使用してドロップダウンのjqueryオブジェクトを取得することから始めて イベントハンドラを添付してください $（ "＃DROPDOWNID"）。on（ " （変更）」、「changeFunction」） – natus
変更機能で隠したいオブジェクトを選択し、hide（）を呼び出して$（オブジェクト）.hide（）を表示し、$（オブジェクト）.show（） – natus