使用 jquery 添加属性

Question

我正在尝试向元素添加属性。基本上，我希望 jquery 代码将其更改为：

<p class = "slider-price">X</a>

为此：

<p class = "slider-price" data-position = "[point-of-center-position(x)], [point-of-center-position(y)]">X</p>

这是我尝试在 </body> 标签上方添加内容的演示：

<script>var attrbt = '"' + ((($(this.parent()).height() - this.outerHeight()) / 2) + $(this.parent()).scrollTop() + "px") + ', ' + ((($(this.parent()).width() - this.outerWidth()) / 2) + $(this.parent()).scrollLeft() + "px") + '"';
$("p.slider-price").attr('data-position', attrbt);</script>

http://jsfiddle.net/qhu68qk9/

我想说的是，通常我应该自己添加属性 'data-position = "100, 100" '（我使用的是 FractionSlider，所以这会将元素定位在滑块内）。但是我希望元素居中，所以我认为使用 jquery 来获取位置会有所帮助。

Answer 1

$(this.parent()) 抛出错误：this.parent 不是函数。您应该使用 $(this).parent() 作为 jQuery 选择器。

Answer 2

将您的代码分解成一些帮助程序如何？

var ypos = function(el) {
   var $el = $(el)
   var h = ($el.parent().height() - $el.outerHeight())/2;
   var offset = $el.parent().scrollTop();
   return h + offset;
}
var xpos = function(el) {
   var $el = $(el)
   var w = ($el.parent().width() - $el.outerWidth())/2;
   var offset = $el.parent().scrollLeft();
   return w + offset;
}

var $slider = $('.slider-price');

console.log(xpos($slider));
console.log(ypos($slider));

var x = xpos($slider);
var y = ypos($slider);
$slider.data('position', {x:x, y:y});

// or
$slider.data('position', x + ', ' + y);

Answer 3

您的代码段存在一些问题。

您没有加载 jQuery 库，因此您不能 select DOM 元素（例如 p.slider-price），如 $("p.slider-price") .要解决这个问题，您应该加载 jQuery 库（在 fiddle 中，您可以通过从框架和扩展菜单中选择它来实现）。然后，使用 jQuery 您将能够更改属性，例如：

$("p.slider-price").attr('data-position', "2");

您在尝试计算 attrbt 时遇到了一些问题（主要是因为您应该首先了解 this 和 parent 的含义）。在您的情况下，您假设 parent 是 p 元素的父 DOM 元素，但 javascript 或 jQuery 不理解这一点。所以，首先你 select(and/or 保存) 你的 p 元素，然后你就可以得到它的父元素，然后你可以计算不同的值。

结合我所解释的所有内容，您将得到这个 fiddle，它可以满足您的期望： http://jsfiddle.net/p62qyvax/4/

使用 jquery 添加属性

Adding attributes with jquery

jquery

attributes