JQuery更新数据属性 [英] JQuery updating data- attribute

问题描述

请考虑以下相册的示例。

专辑的第一页和最后一页是相册尺寸的一半。我将 attr（'data-width'）和 attr（'data-width_correct'） p>

例如 - checkImageDimesions（）

  //定义第一页或最后一页
 if（$（this）.is（'：first-child'）|| $（this）.is（'：last-child '））
 {
 $（this）.find（'img'）。attr（'data-height_correct'，maxHeight）; 
 $（this）.find（'img'）。attr（'data-width_correct'，maxWidth / 2）; 
} else {
 $（this）.find（'img'）。attr（'data-height_correct'，maxHeight）; 
 $（this）.find（'img'）。attr（'data-width_correct'，maxWidth）; 
} 
  

这样可以正常工作，更新数据 - 使用正确的值。我的下一步是如果 width>我想添加一个调整大小的类。

  if（$（this）.find 'img'）。data（'width'）> $（this）.find（'img'）。data（'width_correct'））
 {
 
 $（this） addClass（ '调整'）; 
} 
  

这个函数的调用发生在jQuery .sortable（）的成功上。在第一次排序时，这可以正常工作，但是在随后的排序中，未正确大小的初始图像保留 .resize 以及任何新图像将在 width> width_correct 不分配 resize

可排序 / p>

  $（＃sortable）。sortable（
 {
 success：function（）{checkImageDimension ）} 
} 
  

解决方案

将对象数据（不是简单的字符串，数字，
或布尔值）附加到DOM节点将经常导致Internet
Explorer中的内存泄漏，因为DOM节点不是本机的JavaScript对象
在IE中，所以它不明白如何垃圾收集
附加到他们的东西。

如果你只需要一个简单的标志或你可以使用
（x_mycount，1）或只是使用this.x_mycount在DOM节点
上设置一个属性（请注意选择属性
属性名称，因为你在DOM命名空间，如果你不小心，你可以打破
的东西。）我t最安全地使用.data（）。

资料来源： forum.jquery.com/topic/when-to-use-attr-vs-data

Consider the following example of a photo album.

The first page and last page of the album are half the size of the spread of the album. I set the attr('data-width') and attr('data-width_correct') for comparison

For Example -- checkImageDimesions()

//Define if first or last page
if($(this).is(':first-child') || $(this).is(':last-child'))
{
    $(this).find('img').attr('data-height_correct' , maxHeight);
    $(this).find('img').attr('data-width_correct' , maxWidth / 2);  
} else{
    $(this).find('img').attr('data-height_correct' , maxHeight);
    $(this).find('img').attr('data-width_correct' , maxWidth);  
} 

This works as expected, updating the data- with the correct values. My next step is if the width > width_correct I want to add a class of resize.

if($(this).find('img').data('width') > $(this).find('img').data('width_correct'))
{

     $(this).addClass('resize');
}

The calling of this function happens on the success of jQuery .sortable(). On first sort this works correctly, however on subsequent sorts, the initial image that is not sized correctly retains the .resize and any new image that would return false on width > width_correctdoes not get assigned resize

Sortable

$("#sortable").sortable(
{
success: function(){checkImageDimension()} 
}

解决方案

Attaching object data (something that's not a simple string, number, or boolean) to a DOM node will often cause memory leaks in Internet Explorer. That's because DOM nodes are not native Javascript objects in IE, so it doesn't understand how to garbage collect things that are attached to them.

If you just need a simple flag or number on a DOM node you can use either attr("x_mycount", 1) or just set a property on the DOM node using this.x_mycount instead. (Be careful choosing the attribute or property name since you're in the DOM namespace and you could clobber something if you're not careful.) It's safest to use .data() though.

Source: forum.jquery.com/topic/when-to-use-attr-vs-data

这篇关于JQuery更新数据属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！