JQuery的.on（'更改'）和HTML5输入[type = color]

Question

我正在为我学校的 Virtual Enterprises 课程开发网站，需要一些帮助。

首先关闭我的代码：

$(document).on('click', "#your-nook-theme-btn", function() {
var your_nook = $(this).parent(".og-grid").attr("#your-nook-theme-btn");
    $(".og-grid").hide('slide', 'swing', '5000ms', {direction: 'left'}, 1000);
    $(".main").prepend('<br> <div id="YN">Welcome to Your Nook, Modern Nook Design\'s newest innovation in interior design. Please pick your room\'s color scheme below. <br> <br> <div class="container" class="YN-order_form"><form method="POST" class="YN-order_form" id="YN-order_form"><span id="main-color-span">  <label for="main-color">Main Color: </label> <input type="color" id="main-color" value="#000000"></span><span id="accent-color-span"> <label for="accent-color">Accent Color: </label><input type="color" id="accent-color" name="accent-color" value="#ff0000"></span> <br> <br> <span id="step2"> Good. Now let\'s pick your decor. </span> <br> <br> </form></div></div>');
});

$(document).on('change', "#accent-color", function() {
    var accent = $(this).parent("YN").attr("#accent-color");
    $("#step2").fadeIn("slow");
});

因此，当用户点击红色输入字段时，我希望在两个#step2字段下方的范围<input type="color">淡入淡出;但是，我似乎无法弄清楚如何做到这一点。我试过了.click和.change，但没有运气。我们将非常感谢您提供的任何帮助。输入和跨度都是动态添加的。

Answer 1

您可以使用CSS和Javascript进行自定义。

将span的初始样式保持为visibility:hidden。点击后，将visibility属性更改为visible。

jQuery函数是$("#<id>").attr("visibility", "visible");

Answer 2

只需更改第2步的css，您的代码就可以运行： -

{...}