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

Question

我有一个简单的颜色选择器。有一个 select元素选择 1-3 种颜色想要。选择后会有1-3 div取决于所选的值。现在那些div有类 color1 , color2 , color3单击其中一个，就会出现另一个 div，pickcolor切换有 8 种颜色可供选择。

现在假设我点击了 color1 div pickcolor div 将弹出并在 pickcolor 中选择这 8 种颜色中的一种。它会将颜色传递回 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();
    }
});

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

我的颜色选择器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

我相信这很接近您要找的东西。您必须意识到您的问题包含三个部分:

1. 监听 <select> 上的更改事件元素，因此您可以决定向用户显示多少种颜色(c1、c2...)。
2. 显示颜色的数量。将点击事件绑定(bind)到每个颜色字段，这将调出一个调色板选择器。
3. 将点击事件绑定(bind)到调色板选择器，调色板选择器会将颜色分配回触发它的颜色字段。

HTML 标记极其极小，因为所有元素都是动态生成的。由于大多数 DOM 元素在运行时不存在，您将需要使用事件委托(delegate)(即 .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>