Question

1个快速问题基本上我的功能正常工作但是只有当我点击实际的颜色选择器而不是按钮时它才有效但是我想以不同的方式修改该功能，所以它的工作原理如下。

1.用户点击他们想要使用的颜色。当他们点击div时，它会选择颜色作为背景。

这是我的代码：

$(document).ready(function() {
    var storage;
$("#changeColor").click(function(){
    $("#colorChoice").click(function(){
  $('#' + storage).css('background', $(this).val());
  });
});
  $('#content-link2').on('click', 'div', function(e) {
    storage = ($(e.target).attr("id"));
  });
});

<input type="color" id="colorChoice">
<button id="changeColor" class="btn-primary pull-right">Change</button>

所以，我的问题是如何修改该功能以按预期工作？

Answer 1

试着回答你的问题：

首先：您不应将点击功能嵌套到另一个点击功能中。像这样，每次单击按钮时，都会“初始化”颜色字段的事件监听器。

秒：在颜色输入字段上使用click，您可以在打开对话框时收听事件，而不是在设置/选择颜色时。您应该使用input事件。

$(document).ready(function() {
    var storage;
    $("#colorChoice").on('input',function(){
      storage = $(this).val();
    });
  $('#content-link2').on('click','div',function(e) {
    $(this).css('background',storage);
  });
});

第三：如何更改不同元素的背景颜色。我不确定你想做什么 - 但如果你想在点击它时改变身体的背景颜色，你可以这样做：

// change the body background by clicking anywhere (inside the body)
$('body').on('click', function(e) {
  $(this).css('background',storage);
});

如果要将此功能添加到容器内的所有元素，可以使用通配符选择器：

// would add the click handler to all elements which are inside 
// an element with the ID content-link2.
$('#content-link2').on('click','*',function(e) {

});

或者您可以捆绑一组不同的选择器，例如：

$('#YourColorSetButton').on('click','*',function(e) {
    $('body, #content-link2, #content-link3').css('background',storage);
});

要完成此答案，请参阅上面评论中的fiddle link。

颜色选择器功能颠倒

1 个答案: