从标题到数据-* jQuery？

Question

我有一个 div 元素

<div class="test2" title="space enter=fadeIn exit=fadeout,scaleOut dur=1.2" >blahblahblah</div>

魔术jQuery脚本后我希望它会像那样

<div  class="test2" data-enter="fadeIn" data-exit="fadeOut scaleOut" data-duration="1.2" title="space enter=fadeIn exit=fadeout,scaleOut dur=1.2" > blahblahblah
</div>

所以我试着用这个

<script>
$( document ).ready(function() {
    $("[title*='space']").each(function() {
       var title = $(this).attr('title');
       var titleArray = title.split(" ");
       $(this).attr("data-enter", titleArray[1]);
       $(this).attr("data-exit", titleArray[2]);
       $(this).attr("data-duration", titleArray[3]);
       $(this).removeAttr('title');
    });
});
</script>

但它不能正常工作，因为我有 data-exit="fadeOut scaleOut" 和两个属性，而我的脚本是针对 div 的

<div class="test2" title="space fadeIn fadeout 1.2" >blahblahblah</div>

但我不想要它。也许你知道这个例子的正确解决方案。也许一些 find 或 replaceWith 功能会对此有所帮助。谢谢。我希望你理解我的问题。

Answer 1

我认为这是正则表达式的工作。像这样：

$("[title*='space']").each(function() {

    var title = this.title,
        enter = this.title.match(/enter=(.*?)(\s|$)/),
        exit  = this.title.match(/exit=(.*?)(\s|$)/),
        duration = this.title.match(/dur=(.*?)(\s|$)/)
        
    $(this).attr("data-enter", enter[1]);
    $(this).attr("data-exit", exit[1].replace(/,/, ' '));
    $(this).attr("data-duration", duration[1]);
    $(this).removeAttr('title');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test2" title="space enter=fadeIn exit=fadeout,scaleOut dur=1.2" >blahblahblah</div>

从标题到数据-* jQuery？

from title to data-* by jQuery?

javascript

jquery

attributes

title