2 sunny desmond sunny_desmond 于 2016.03.08 12:03 提问

关于jquery 获取data属性值的问题

 <ul class="pics">
                    <li><a id="img1" href="javascript:choose(1);" title="梦幻玫瑰套装" data-img="1.png">梦幻玫瑰套装</a></li>
</ul>

  function choose(index){
    var data=$(".pics li:eq("+index+") a").data("img");
    alert(data);
}

为什么一直获取到undefined?求大神指导!

7个回答

caozhy
caozhy   Ds   Rxr 2016.03.08 12:16

调试下index多少,有没有找到a标签。

sunny_desmond
sunny_desmond 感谢感谢
2 年多之前 回复
sunny_desmond
sunny_desmond   Rxr 2016.03.08 12:18

可是我用
var data=$("#img1").data("img");也不行。。。。

sunny_desmond
sunny_desmond   Rxr 2016.03.08 12:33

已解决了,发现公司用的JQ版本太低了。。。。。用新版本后就可以啦

Royal_lr
Royal_lr   Ds   Rxr 2016.03.08 13:26

版本是有多低

sunny_desmond
sunny_desmond 很低。。。
2 年多之前 回复
showbo
showbo   Ds   Rxr 2016.03.08 13:47

你那个是自定义属性,用attr,而且要写全来。data是存储数据,不是属性,你需要调用data('img','xxx')这样才能使用data('img')获取

   function choose(index){
    var data=$(".pics li:eq("+index+") a").data("data-img");
    alert(data);
}
sunny_desmond
sunny_desmond 大神,您好这个已经试过了哎,确实是公司JQ版本太低了呢,换上新版本的JQ CDN 就行了,然后这个data的这个用法我也生效了呢
2 年多之前 回复
sunny_desmond
sunny_desmond   Rxr 2016.03.08 19:08

改版后的

 <ul class="pics">
                    <li><a href="javascript:choose(1);" title="梦幻玫瑰套装" data-img="1.png">梦幻玫瑰套装</a></li>
                    <li><a href="javascript:choose(2);" title="代币*40" data-img="2.png">代币*40</a></li>
                    <li><a href="javascript:choose(3);" title="高级经验糖果" data-img="3.png">高级经验糖果</a></li>
                    <li><a href="javascript:choose(4);" title="怦然心动(绿)1天" data-img="4.png">怦然心动(绿)1天</a></li>
                    <li><a href="javascript:choose(5);" title="柠檬花开套装" data-img="5.png">柠檬花开套装</a></li>
                    <li><a href="javascript:choose(6);" title="珍爱巧克力*4" data-img="6.png">珍爱巧克力*4</a></li>
                    <li><a href="javascript:choose(7);" title="彩虹桥 1天" data-img="7.png">彩虹桥 1天</a></li>
                    <li><a href="javascript:choose(8);" title="幸运宝石*40" data-img="8.png">幸运宝石*40</a></li>
                    <li><a href="javascript:choose(9);" title="香奈儿の恋套装" data-img="9.png">香奈儿の恋套装</a></li>
                </ul>
 function choose(index){
    var data=$(".pics li:eq("+(index-1)+") a").data("img");
    // alert(data);
    var img=$("<img src='images/"+data+"' />");
    var src=img.attr("src");
    var divNum= $(".img").children().length;
    if(divNum==0){
    $(".img").append(img);

    }else{
        $("img").attr("src",src);
    }
}
WinsenJiansbomber
WinsenJiansbomber   2016.03.08 22:42

大神你的选择器是我见过最复杂的!如果JQ真能识别说明JQ真的好用!,不过怕你不知道它选中的是什么!还有想要使用标签上的数据不用这么复杂,用属性方法就可以了$("div").attr("rel","value"),,读取时用$("div").attr("rel")

sunny_desmond
sunny_desmond 这个选择器 我不知道还能怎么写,这样的写法 是可以确定具体的选择的值的。然后你说的attr方法我也试了一下,也可以,现在不知道attr与data方法在解决类似问题的时候,怎么选用。
2 年多之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
jquery 获取data-* 属性值
下面就详细介绍四种方法获取data-*属性的值&amp;lt;li id=&quot;getId&quot; data-id=&quot;122&quot; data-vice-id=&quot;11&quot;&amp;gt;获取id&amp;lt;/li&amp;gt;1需要获取的就是data-id 和 dtat-vice-id的值一:getAttribute()方法const getId = document.getElementById('getId'); // //getAtt...
标签data-*自定义属性值和根据data属性值查找对应标签
1、html中设置标签data-*的值 <dl> <dt>标题</dt> <dd data-url="11">11111</dd> <dd data-url="22">22222</dd> </dl> 2、点击获取当前标签的data-url的值 $('dd').on('click', function() { var urlVal = $(this).data('ur
jQuery中的data方法只能获取不能设置值?
data([key],[value]) 在元素上存放或读取数据,返回jQuery对象 上面是在jQuery手册中的截取,“存放”数据?先看代码<div id="div1" data-test="test">1</div> <script> console.log($("#div1").data("test"));//test </script>OK,读取是正常的。 再来,<div id
JQUERY获取html标签自定义属性值或data值
示例: //获取属性值 1 JQUERY取值: $("#text").attr("value"); //获取自定义属性值 2 JQUERY取值:$("#text").attr("data_obj"); //获取data值 3 JQUERY取值:$("#text").data("name");
bug宝典js篇 jquery获取不到data属性的值
下面data-moniAdd这个属性的值获取不到,<c:forEach var="item" items="${upMoniInfos }" varStatus="idx"> <div class="col col-xs-4 "> <div cla
jqery中无法通过 .data(key,value)方法来设置 data-*的属性
https://segmentfault.com/q/1010000004959330 误解了data的用法, 试着看看jquery的源码中data的封装:data 很明显的表明$(element).data(); 是需要html标签中已经存在如这样的,所以题主找不到比较正常。 一般操作的时候,都会在html标签中添加data-name="value",然后再通过jquery
jQuery根据data-的值来找到引用的元素
&amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;title&amp;gt; &amp;lt;/title&amp;gt; &amp;lt;style&amp;gt; #left{ height:500px; width:20%; float:left; border-top:1px solid blue; } #list{margin:0...
获取data-*属性值
获取data-*属性值 c
jquery和zepto data() 读取和设置data-XX
jquery和zepto 的data()方法差异点,data() 方法很好用,但是使用当中也要注意一些小细节哦,否则就等着吃bug吧。
HTML5中的data-*属性和jQuery中的.data()方法使用
HTML5中的data-*属性 我们往往会根据需要在HTML标记上添加自定义的属性来存储和操作数据,我们自定义的属性名字也千奇百怪,五花八门。我们可以通过原生的getAttribute()或jQuery中的.attr()来获取我们自定义的属性。但是HTML在向着规范化和标志前进。在HTML5标准规定,自定义的属性都已data—*开头,这样就区分开了固有属性和自定义属性。HMTL代码如下: 测试