Question

我正在尝试将参数作为字符串检索并直接将它们提供给jQuery的animate函数，如下所示：

我的HTML：

<img src="myImage.png" rel="{top:'20px',left:'1000px'},500|{top:'20px',left:'10px'},500" class="slide-content" />

我的jQuery代码：

var $elem = $('.slide-content');
var settings = $elem.attr('rel').split('|');
$elem.animate(settings[1]);

这不起作用。如果我手动设置它可以工作：

$elem.animate({top:'20px',left:'1000px'},500);

是否有简单的方法使其有效？或者我是否必须解析字符串并构建设置对象？

任何指针都会受到赞赏，而不是x！

在Jon's anwser之后编辑： 事实证明你必须解析正确形成的JSON，所以我更新了代码

HTML：

<img src="myImage.png" rel='{"anim":{"top":"20px","left":"1000px"},"speed":"500"}|{"anim":{"top":"20px","left":"20px"},"speed":"500"}' class="slide-content" />

注意html rel属性是如何用单引号而不是双引号括起来的。这是因为JSON元素需要用双引号括起来。

jQuery部分：

var $elem = $('.slide-content');
var settings = $elem.attr('rel').split('|');
var animIn = $.parseJSON(settings[1]);
var animOut = $.parseJSON(settings[0]);
$elem.animate(animIn.anim, animIn.speed).delay(2000).animate(animOut.anim, animIn.speed);

只是为了澄清问题背后的原因：

这将作为滑块插件的基础，其中每个内部部件将独立动画，并且必须易于用户在HTML元素本身内设置
必须在使用XHTML的网站上运行

无论如何，谢谢你的快速反应和有用的指示：）

Answer 1

您需要传递一个对象，而不是一个字符串。您已经拥有了对象的JSON表示，因此您只需要从中创建一个对象。使用JSON.parse执行此操作，这是所有现代浏览器都支持的。

更新：我只是更加注意并意识到你已经尝试过在那里的动画持续时间中进行鞋拔，这没有帮助（它使事情变得更复杂）。您应该考虑将HTML更改为：

<img src="myImage.png" 
     rel="{anim:{top:'20px',left:'1000px'},speed:500}|{anim:{top:'20px',left:'10px'},speed:500}" class="slide-content" />

然后允许你这样做：

var $elem = $('.slide-content');
var settings = JSON.parse(($elem.attr('rel').split('|'))[1]);
$elem.animate(settings.anim, settings.speed);

顺便说一下：像这样征服rel属性可能不是最好的想法。如果要将任意数据附加到这样的元素，可以使用HTML 5数据属性：

<img src="myImage.png"
     data-foo="{top:'20px',left:'1000px'}"
     data-foo-speed="500"
     data-bar="{top:'20px',left:'10px'}"
     data-bar-speed="500"
     class="slide-content" />

var $elem = $('.slide-content');
$elem.animate(JSON.parse($elem.data("foo"), $elem.data("foo-speed"));

Answer 2

我认为你忘了从rel属性值中解析出json String。

var settings = $.parseJSON($(elem).attr('rel').split('|'));

Answer 3

您无需编辑任何内容，请尝试：

function objectify(input) {
    objectify.cache = objectify.cache || {};

    if (typeof objectify.cache[input] !== 'undefined') {
        return objectify.cache[input]
    }

    var components = /^({.*}),([0-9]+)$/.exec(input).splice(1),
        settings = JSON.parse(components[0].replace(/'/g, '\"')),
        speed = components[components.length - 1];

    objectify.cache[input] = {
        settings: settings,
        speed: speed
    };

    return objectify.cache[input];
}

然后你就

了

var $elem = $('.slide-content'),
    settings = $elem.attr('rel').split('|');

$elem.animate(objectify(settings[1]).settings,
              objectify(settings[1]).speed);

jQuery - 如何将字符串作为参数传递给动画函数

3 个答案: