如何找到先前单击的类/元素-jQuery

Question

我有一个简单的颜色选择器。 有一个select元素可以选择1-3种所需的颜色。 选择后，将有1-3 div根据所选择的值。 现在那些div有一个像类color1 ， color2 ， color3任一个点击，还有另一个div pickcolor切换不得不选择8种颜色。

因此，现在让我们说我单击pickcolor div，将弹出color1 div，在pickcolor选择这8种颜色中的pickcolor它将把颜色传递回color1以向用户显示。

我可以完成一项工作，但这只能通过提供静态类来完成，但是要有两种或三种颜色。 我似乎无法弄清楚如何使用jquery来弄清楚如何返回到上一个单击的类/ element

我在选择部分的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

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

1. 侦听<select>元素上的change事件，因此您可以决定向用户显示多少种颜色（c1，c2 ...）。
2. 显示颜色数。 将click事件绑定到这些颜色字段中的每个颜色字段，这将显示一个调色板选择器。
3. 将单击事件绑定到调色板选择器，调色板选择器会将颜色分配回触发它的颜色字段。

因为所有的元素都在运行中所产生的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>