Question

我有一个简单的颜色选择器。有一个select元素可供选择1-3种颜色。选择后，将有1-3 div取决于所选的值。现在，div类似color1，color2，color3 任何一个点击，还有另一个div pickcolor切换，有8种颜色可供选择。

所以现在让我们点击color1 div pickcolor div会弹出pickcolor＆＃39后选择其中一种颜色; ll将颜色传递回color1以显示用户。

我可以完成一个，但这只能通过提供静态类来完成，但是当有两种颜色或三种颜色时。我似乎无法弄清楚如何使用jquery来找出如何回到之前点击的类/元素

我的html选项部分

中有类似的内容

<select name="number-of-colors" class="number-of-colors">
    <option value="" group="1">Select A Number</option>
    <option value="1" group="1">1</option>
    <option value="2" group="1">2</option>
    <option value="3" group="1">3</option>
</select>
<div class="number-of-color-field">
    <div name="color1" class="color1" id="color1"></div>
    <div name="color2" class="color2"></div>
    <div name="color3" class="color3"></div>
</div>

在我的jquery中，我有类似的东西

  $('.number-of-colors').on('change', function(){
    var $clicked = $(this);
    var $closestDiv = $clicked.closest("div");

    var chooseColorValue = $clicked.val();

    if(chooseColorValue == 1){
        $closestDiv.find('div.color1').show().css({"width": "inherit", "height": "100%", "background-color": "pink", "border": "1px solid lightgrey", "border-radius": "5px"});
        $closestDiv.find('div.color2').hide();
        $closestDiv.find('div.color3').hide();

    }else if(chooseColorValue == 2){
        $closestDiv.find('div.color1').show().css({"width": "inherit", "height": "50%", "background-color": "pink", "border": "1px solid lightgrey", "border-radius": "5px"});
        $closestDiv.find('div.color2').show().css({"width": "inherit", "height": "50%", "background-color": "pink", "border": "1px solid lightgrey", "border-radius": "5px"});
        $closestDiv.find('div.color3').hide();

        $closestDiv.find('div.color1').on('click', function(){
            $('.colorSelectBox').css({"left": "100px","top": "570px"}).toggle();
            $('div.black')
                .add('div.pink')
                .add('div.yellow')
                .on('click', function(){
                    var attrValue = $(this).attr('value');
                    $closestDiv.find('div.color1').css({"background-color": attrValue});
                });
        });

        $closestDiv.find('div.color2').on('click', function(){
            $('.colorSelectBox').css({"left": "100px","top": "570px"}).toggle();
            $('div.black')
                .add('div.pink')
                .add('div.yellow')
                .on('click', function(){
                    var attrValue = $(this).attr('value');
                    $closestDiv.find('div.color2').css({"background-color": attrValue});
                });
        });




    }else if(chooseColorValue == 3){
        $closestDiv.find('div.color1').show().css({"width": "inherit", "height": "33%", "background-color": "pink", "border": "1px solid lightgrey", "border-radius": "5px"});
        $closestDiv.find('div.color2').show().css({"width": "inherit", "height": "33%", "background-color": "pink", "border": "1px solid lightgrey", "border-radius": "5px"});
        $closestDiv.find('div.color3').show().css({"width": "inherit", "height": "33%", "background-color": "pink", "border": "1px solid lightgrey", "border-radius": "5px"});
    }else{
        $closestDiv.find('div.color1').hide();
        $closestDiv.find('div.color2').hide();
        $closestDiv.find('div.color3').hide();
    }
});

如图所示，这只适用于color1，如果我复制它并使用div.color2它不会起作用，因为它不知道去哪里。

我的颜色选择器div

            <div class="clear"></div>
            <div class="colorSelectBox">
                <div>Transparent</div>
                <div>
                    <div class="pink" value="pink"></div>
                    <div class="black" value="black"></div>
                    <div class="yellow" value="yellow"></div>
                </div>
                <div class="clear"></div>
                <div>solid</div>
                <div>
                    <div class="red"></div>
                    <div class="blue"></div>
                    <div class="grey"></div>
                    <div class="green"></div>
                    <div class="white"></div>
                </div>
            </div>

先谢谢大家。

Answer 1

我相信这很接近你所期待的。你必须意识到你的问题有三个部分：

聆听<select>元素上的更改事件，以便您可以决定向用户显示多少种颜色（c1，c2 ......）。
显示颜色数量。将click事件绑定到每个这些颜色字段，这将打开一个调色板选择器。
将单击事件绑定到调色板选择器，该选择器将颜色指定回触发它的颜色字段。

HTML标记极其最小，因为所有元素都是动态生成的。由于大多数DOM元素在运行时不存在，因此您需要使用事件委派（即.on()）。调色板由colors对象数组定义，您当然可以自由操作。我只添加了3种颜色作为参考。

不用多说，这是我的代码：

$(function() {
  $('.number-of-colors').on('change', function(){
    // How many colours do the user want? Convert that to an integer
    var colorCount = parseInt($(this).find('option:selected').val(), 10);

    // Empty fields
    $('div.number-of-color-field').empty();

    // Create new fields
    for(var i = 0; i < colorCount; i++) {
      $('<div />', {
        'class': 'color-field-' + (i+1)
      })
      .text('Color field #' + (i+1))
      .appendTo('div.number-of-color-field');
    };
  });

  // Bind click events to color fields
  var colors = [
    { 'class': 'palette-color', 'bgCol': '#d53e4f' },
    { 'class': 'palette-color', 'bgCol': '#f46d43' },
    { 'class': 'palette-color', 'bgCol': '#fdae61' },
    { 'class': 'palette-color', 'bgCol': '#fee08b' },
    { 'class': 'palette-color', 'bgCol': '#e6f598' },
    { 'class': 'palette-color', 'bgCol': '#abdda4' },
    { 'class': 'palette-color', 'bgCol': '#66c2a5' },
    { 'class': 'palette-color', 'bgCol': '#3288bd' }
  ];

  // Bind click event to each color field
  $(document).on('click', 'div.number-of-color-field > div', function() {   
    // Store this reference 
    var that = this;

    // Empty palette
    $('div.color-select-box').empty();

    // Loop through each color
    $.each(colors, function(i, col) {
      $('<div />', {
        'class': col.class
      })
      .css('background-color', col.bgCol)
      .attr({
        'data-bgCol': col.bgCol,
        'data-target': $(that).attr('class')
      })
      .appendTo($('div.color-select-box'));
    });
  });

  // Bind click event to each color box
  $(document).on('click', 'div.color-select-box > div', function() {
    // Empty parent
    $(this).parent().empty();

    // Assign colour to color field
    $('div.number-of-color-field > div.' + $(this).attr('data-target')).css('background-color', $(this).attr('data-bgCol'));
  });
});

div.number-of-color-field > div {
    cursor: pointer;
}

div.color-select-box > div {
    display: inline-block;
    cursor: pointer;
    width: 20px;
    height: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="number-of-colors" class="number-of-colors">
    <option value="" >Select A Number</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>
<div class="number-of-color-field"></div>
<div class="color-select-box"></div>

如何找到之前点击的类/元素 - jquery

1 个答案: