如何选择一个元素并在其上调用jquery插件

时间:2012-09-09 03:30:11

标签: jquery flash colors background jquery-animate

我的网站有一个常见问题解答部分,其中我想要使用此特定功能点击问题答案的div的背景属性

// Extend jquery with flashing for elements
$.fn.flash = function(duration, iterations) {
    duration = duration || 1000; // Default to 1 second
    iterations = iterations || 1; // Default to 1 iteration
    var iterationDuration = duration / iterations;

    for (var i = 0; i < iterations; i++) {
        this.fadeOut(iterationDuration).fadeIn(iterationDuration);
    }
}

有没有办法使用调用语句

$("#someElementId").flash(1000, 4);

实现这一目标。我的HTML看起来像这样


<p><ul class="disc">
<li><a href="#a1">Question</a></li>

<div class="row"><a name="a1">
<strong>Question</strong>

<p>Answer</p>

<a href="#top"><em>Back to top</em></a>

1 个答案:

答案 0 :(得分:0)

是的,在你的元素上添加一些类并将它们组合在一起:

<p><ul class="disc">
<li><a href="#a1" class='question' data-num='1'>Question</a></li>
<div class="row"><a name="a1">
<strong>Question</strong>

<p class='answer-1'>Answer</p>

<a href="#top"><em>Back to top</em></a>

$(function(){
  $(".question").on('click', function(){
     var num = $(this).data('num');
     $(".answer-"+num).flash(1000, 4);
  });
});

当用户点击问题时加载文档,我检查存储在data-num属性中的问题编号。从那我可以得出我闪现的答案的类。