Javascript 使用数据属性识别活动选择

我会尽量使它简单

我有一个

JSON

对象，它是通过AJAX提取的。我在一个

主div

中动态显示数据中的图标列表，这些图标可以打开或关闭

我有一个

辅助div

，其中显示

所选的
项，而
主div图标接收一类
活动的

我希望最终用户能够通过单击
主div或
辅助div来删除其中任何一个

这其中的大部分是有效的，但我很难找到将它们映射到一起的最佳方法，因此我有两个单独的
单击事件
，它们可以控制相同的结果

我认为这可能与我动态创建元素的事实有关。。。这创造了更多的元素。。。必须改变初始元素

到目前为止，我的结构是映射
数组中的当前选择。这使我能够控制保存一个基于代码的列表，其中列出了所选的所有内容（其中的数据比我将提供的示例中的数据多得多）

到目前为止，我是这样做的：

HTML:

我真的想要一些
data
方法来解决这个问题，例如，如果类有
data color=“yellow”
的话，就删除它

游乐场：

编辑：

两者都已选择，按设计工作：

单击黄色分区。黄色按钮仍处于活动状态：

应在按下黄色div或按钮时从按钮中删除活动类，如下所示：
您正在使用
.data（PROP）
分配
数据-*属性，而不是
属性
，因此无法使用
属性选择器访问/选择具有
数据-*
属性的元素，请使用
.attr（'data-color'）
而不是
.data（property）
分配
属性


，选择具有指定的属性的元素，该属性的值正好等于某个值

，存储与匹配元素关联的任意数据

使用
.data（）
更新数据值时，它正在更新由
jQuery
管理的内部对象，因此它不会在
数据-*属性中更新



//简单的模拟AJAX数据
var ourData={
“颜色1”：“黄色”，
“颜色2”：“蓝色”
};
var$options=$（“#options”）；
变量$selectedOptions=$（“#selectedOptions”）；
//用于跟踪选定对象的数组
var-selectedOptions=[]；
//使初始选项成为动态列表
makeOptions（我们的数据，$options）；
//如果单击主div中的选项，则处理类更改
$（'button'）。在（'click'，function（）上{
pickOption（$（this））；
});
/*这个函数就是问题所在。该选项将从数组和辅助div中删除，但主div上仍会出现active类*/
$selectedOptions.on（'click'，'optionActive'，function（）{
var option=$（this.data（'color'）；
var optionPosition=jQuery.inArray（option，selectedOptions）；
选择选项。拼接（选项位置，1）；
$（'[data color=“'+$（this）.data（'color'）+'“]'））.removeClass（'active'）；
显示选项（selectedOptions，$selectedOptions）；
});
//为DOM创建初始图标（本例中为按钮），并为颜色应用数据属性
函数makeOptions（选项$container）{
变量$results=$（''）；
$。每个（选项、功能（键、值）{
变量$optionButton=$（''+键+''：''+值+''）；
$optionButton.attr（'data-color'，value）；
//___________^^^^^^^^^^^^^^^^^^这里有个小把戏！
$results.append（$optionButton）；
});
$container.append（$results）；
}
/*用于从主分区中选择选项的处理程序。处理活动类。
我不使用简单的类切换，因为在很多情况下，不允许单击*/
函数选择选项（$option）{
var selectedOption=$option.data（'color'）；
//如果该选项返回true，或者它还不存在
如果（修改选项（选择选项，选择选项））{
$option.addClass（'active'）；
}否则{
$option.removeClass（'active'）；
}
//重新创建当前选定的选项
显示选项（selectedOptions，$selectedOptions）；
}
/*搜索数组以查看该选项是否存在。返回true或false，并从数组中推送或拼接选项*/
功能修改选项（选项）{
var optionPosition=jQuery.inArray（option，selectedOptions）；
如果（选项位置==-1）{
选择选项。按（选项）；
返回true；
}否则{
选择选项。拼接（选项位置，1）；
返回false；
}
}
/*显示阵列中存在的所有当前选定选项*/
功能显示选项（selectedOptions，$container）{
$container.empty（）；
$。每个（选择选项、函数（选项、值）{
变量$optionFile=$（''）；
$optionFile.data（'color'，value）
.text（选项+“：”+值）
.css（“背景”，值）；
$container.append（$optionfile）；
});
}
.active{
背景：#共因失效；
}
.光学活性{
最小宽度：100px；
最小高度：100px；
显示：内联块；
边缘：1米；
背景：#eee；
}

仍然无法理解问题。按下按钮后，单击其中一个选项div（而不是按钮）。div消失了，它超出了我的数据范围，但该按钮保持该类活动。一些图像将有助于更好地理解您的问题。添加了一些图像…我觉得自己有点迟钝。我刚刚阅读了.data文档，它清楚地表明这是一个单向映射。哦！谢谢@NicholasHazel，我可以和任何人发生关系！知道了
属性选择器
和
数据
的工作原理，就成功了！我很高兴它帮了大忙，伙计！高兴的Coding@Rayon迅捷
<div id="options"></div>
<div id="selectedOptions"></div>

// Simple simulated AJAX data
var ourData = {
  "color1": "yellow",
  "color2": "blue"
};
var $options = $('#options');
var $selectedOptions = $('#selectedOptions');
// Array to keep track of which objects are selected
var selectedOptions = [];

// Makes the initial option dynamic list
makeOptions(ourData, $options);

// If an option from the main div is clicked, handle class changing
$('button').on('click', function(){
    pickOption($(this));
});

/* This function is the problem. The option gets removed from the array, and from the secondary div, but the class of active still occurs on the main div. */
$selectedOptions.on('click', '.optionActive', function(){
  var option = $(this).data('color');
  var optionPosition = jQuery.inArray(option, selectedOptions);
  selectedOptions.splice(optionPosition, 1);
  displayOptions(selectedOptions, $selectedOptions);
});

// Creates initial icons (buttons in this case) to the DOM and applies a data-attribute for the color
function makeOptions(options, $container){
    var $results = $('<div id="results">');
  $.each(options, function(key, value){
    var $optionButton = $('<button>' + key + ':' + value + '</button>');
    $optionButton.data('color', value);
    $results.append($optionButton);
  });
  $container.append($results);
}

/* Handler for selecting an option from the Main Div. Handling the class active.
I am not using a simple classToggle because there are many situations where a click is not allowed */
function pickOption($option){
  var selectedOption = $option.data('color');
  // If the option returns true, or that it doesn't exist yet
  if(modifyOptions(selectedOption, selectedOptions)){
    $option.addClass('active');
  } else {
    $option.removeClass('active');
  }
  // Recreate our current selected options
  displayOptions(selectedOptions, $selectedOptions);
}

/* Searches array to see if the option exists. Returns true or false and either pushes or splices the option from the array */
function modifyOptions(option){
  var optionPosition = jQuery.inArray(option, selectedOptions);
  if(optionPosition == -1){
    selectedOptions.push(option);
    return true;
  } else {
    selectedOptions.splice(optionPosition, 1);
    return false;
  }
}

/* Displays all currently selected options that exist in our array */
function displayOptions(selectedOptions, $container){
  $container.empty();
  $.each(selectedOptions, function(option, value){
    var $optionTile = $('<div class="optionActive">');
    $optionTile.data('color', value)
                          .text(option + ":" + value)
                .css('background', value);
    $container.append($optionTile);
  });
}

$('*[data-color="' + $(this).data('color') + '"]').removeClass('active');