我在按钮上有一些数据属性，当单击这些按钮时，我需要将它们作为内容发送到 div。到目前为止我的代码的一部分是这样的：
function getDiscount() {
var buttons = document.querySelectorAll(".form-button");
buttons.forEach(function(item, index) {
item.addEventListener('click', function() {
var discount = getDiscount(this);
});
});
function getDiscount(clicked_element) {
var val = clicked_element.getAttribute("data-discount");
return val;
}
};<div class="discount__Topics">
<div><strong class="discount-amount">50</strong>%</div>
<div class="offers">
<button class="form-button" data-discount="38">Offer 1</button>
<button class="form-button" data-discount="50">Offer 2</button>
<button class="form-button" data-discount="22">Offer 3</button>
<button class="form-button" data-discount="88">Offer 4</button>
</div>
</div>
<div class="discount__Topics">
<div><strong class="discount-amount">60</strong>%</div>
<div class="offers">
<button class="form-button" data-discount="12">Offer 1</button>
<button class="form-button" data-discount="32">Offer 2</button>
<button class="form-button" data-discount="44">Offer 3</button>
<button class="form-button" data-discount="55">Offer 4</button>
</div>
</div> …我正在使用以下代码来访问HTML数据属性:
HTML
<p class="add-favorites-to-list">
<a href="#" data-baskettype="order"><img src="/style/icons/cart_add.png"> Test1</a>
<a href="#" data-baskettype="quote"><img src="/style/icons/calculator_add.png"> Test2</a>
</p>
JS
$(document).ready(function() {
$('.add-favorites-to-list').show();
$('.add-favorites-to-list a').click(function() {
alert($(this).data('baskettype'));
return false;
});
});
CSS
.add-favorites-to-list { display: none; }
示例:http://jsfiddle.net/mR8gK/1/
哪个在jsFiddle上运行正常,但它在我的站点中不起作用(使用相同的代码和相同的浏览器).我得到undefined的alert().
我已经检查过jQuery是否找到了元素,因为:console.log($(this).html());显示了元素的内容.
是否有任何(显而易见的)原因导致该代码在我的网站中无效但在jsFiddle上有效？
我可以通过它的CSS将数据属性添加到元素吗？
.myClass{
/* assign data attribute here */
}
我正在尝试从以下标记中提取FIRST数据属性:
<button class="buttonMiddle" data-vid="1">
<a href="#">who helped them</a>
</button>
<button class="buttonMiddle" data-vid="2">
<a href="#">who helped them</a>
</button>
我想到的JS是:
var button1 = $('.buttonMiddle').get(0).data('vid');
console.log(button1);
Chrome的控制台给了我这个:
未捕获的TypeError:对象#没有方法'数据'
我已经介绍了基本的故障排除 - > jQuery在这个js文件之前加载,它们都在关闭body标签之前加载(所以不需要$(function() {// find data-attribute});.
鉴于此标记:
<a data-foo="bar baz">Hello</a>
是否可以删除baz但保持bar,理想情况下不删除然后添加回来bar.
jQuery removeData方法似乎删除了指定的数据属性或所有数据属性.
我有一组具有数据属性的li元素,data-is-archived = true/false我需要遍历所有li,寻找任何data-is-archived等于true的元素.目前我这样做:
$('#comment-section').find('li').data('is-archived')
我知道false,这是部分正确的.页面上有两个LI元素,此属性为false,另一个设置为true.它似乎停止在那个错误的那个而不再继续下去.可能有500个li元素,其中355个可能是真的.
什么是正确的方法来获得所有有data-is-archived=true背部的li元素？
我有如下代码，
<div class="apples" data-id="1"></div>
<div class="apples" data-id="2" id="secondDiv"></div>
每个 div 都有一个 onClick 事件侦听器。当我单击一个 div 时，会根据单击的 div 发生一些独特的事情。例如，
$(".apples")[0].addEventListener("click", function(){
console.log("first apple was clicked");
});
我的问题是关于数据属性。单击时，我想知道被单击的 div 的数据属性。
这有效，
$("#secondDiv").data("id"); //returns 2
这不，
$(".apples")[1].data("id"); //returns TypeError: $(...)[1].data is not a function
这是没用的，
$(".apples").data("id"); //returns 1
如何使用类名获取 div 的数据属性？代码中的实际 div 数量太大，无法为每个提供唯一的 HTML id。
谢谢
我的页面上有几个元素具有相同的数据属性,尽管值不同.元素的格式如下:
<input type="radio" data-toggle='["one","two","three"]'/>
现在,我想从所有这些元素中获取数据,我想我可以做到:
var data = $('[data-toggle]').data("toggle");
但是这只输出第一个元素的数据,忽略了具有该数据属性的所有其他元素.
我猜这与它的阵列/ JSON格式有关,但我不清楚为什么会这样,我应该如何去检索我的所有值.
如何从所有这些数据属性中获取所有数据？
这是一个说明我的问题的小提琴:http://jsfiddle.net/6u67o9oo/
我有一个具有多个值的数据属性(data-day ="5,6,7"),我想将今天的日期与这些值进行比较.请在下面找到我创建的代码,但只有在数据属性中只有一个值时才能正常工作.我如何检查和比较今天日期与属性中的多个值？
<script>
jQuery(document).ready(function(JQuery){
var date = new Date();
var getday = date.getDay();
var show = 'today';
jQuery(".cd-gallery ul li").each(function() {
var running_days = JQuery(this).data('day');
if (getday == running_days) {
JQuery(this).addClass('today');
}
else {
}
});
});
</script>
<section class="cd-gallery">
<ul>
<li class="mix weekends" data-day="5,6,7" >