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

Question

我正在尝试以字符串形式检索参数，并将它们直接提供给 jQuery 的动画函数，如下所示：

my html:

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

my jQuery code:

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

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

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

是否有一种简单的方法可以使其工作？或者我是否必须解析字符串并构建一个设置对象？

任何指示将不胜感激，谢谢！

根据乔恩的回答进行编辑： 结果你必须解析正确形成的 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 字符串。

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);