jQuery数据属性没有获取值答案

【问题标题】：jQuery Data Attribute not getting valuesjQuery数据属性没有获取值
【发布时间】：2014-08-28 19:56:42
【问题描述】：

jQuery 数据属性无法在最简单的演示中运行...

$( document ).ready(function() {

  $("#font_selection").change(function(){
    var fontImgName = $(this).data('font-img');
    //var fontImgName = $("#font_selection").data('font-img');

    //var fontImgName = $(this).attr('data-font-img')
    //var fontImgName = $("#font_selection").attr('data-font-img')

    alert(fontImgName);

  });

});

我一定是遗漏了什么，我尝试了所有我能想到的组合，但没有成功，请帮忙！

JSFiddle 演示在这里http://jsfiddle.net/8fvo3kw0/1/

【问题讨论】：

标签： javascript jquery attributes jquery-data

【解决方案1】：

http://jsfiddle.net/8fvo3kw0/3/

$( document ).ready(function() {

  $("#font_selection").change(function(){
    var fontImgName = $(this).find('option:selected').data('font-img');      
    alert(fontImgName);
  });

});

【讨论】：

【解决方案2】：

你需要查看选中的选项元素：

var fontImgName = $(this).find('option:selected').data('font-img');

jsFiddle example

【讨论】：

【解决方案3】：

您正在尝试获取select 的data 属性，而您的选择没有data 属性。

我认为您需要所选项目的数据属性

使用下面的

var fontImgName = $(this).find(':selected').data('font-img');

DEMO

【讨论】：

【解决方案4】：

那是因为您引用了 select 元素本身。

var fontImgName = $(this).find('option:selected').data('font-img');

这将找到被选中的选项，然后访问它的数据属性。您正在做的是，您正在选择数据属性的选择值。在您的 HTML 中，选择根本没有 data- 属性。

【讨论】：