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/

我想说的是，通常我应该添加属性＆＃39; data-position =＆＃34; 100,100＆＃34; ＆＃39;我自己（我使用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库，因此您无法选择像$（“p.slider-price”）这样的DOM元素（例如p.slider-price）。要解决这个问题，你应该加载jQuery库（通过从框架和扩展菜单中选择它来完成它）。使用jQuery，您将能够更改属性，例如：

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

你在尝试计算attrbt时遇到了一些问题（主要是因为你应该先了解这个和父亲的意思）。在您的情况下，您假设父元素是您的p元素的父DOM元素，但javascript或jQuery不理解。所以，首先你选择（和/或保存）你的p元素，而不是你能够获得它的父元素，而不是你可以计算不同的值。

结合我所解释的所有内容，你会得到这个符合你期望的小提琴： http://jsfiddle.net/p62qyvax/4/

使用jquery添加属性

3 个答案: