Question

这里肯定有一些小小的东西被忽略了。我只是尝试选择DL中的所有DT元素并插入一些HTML并添加一个单击事件，但它似乎只适用于第一个DT。

以下是我插件的摘录：

 return this.each(function(){ 
           var questions = $(this).find('dt');
            questions.each(function(){

                $(this).attr("title","Show answer"); // add screen tip
                $(this).wrapInner("<span class='faqToggleQues' />");
                $(this).prepend("<span class='faqToggleNumber'>"+numPrefix+(i+1)+numSubfix+"</span>");

            });
        });

我也在jsFiddle http://jsfiddle.net/mindfriction/u6WYQ/

上托管了代码

Answer 1

$(document).ready(function() {
 $('dt').each(function(){

                $(this).attr("title","Show answer"); // add screen tip
                $(this).wrapInner("");
                $(this).prepend(""+numPrefix+(i+1)+numSubfix+"");

            });

});

Answer 2

根据您提供的新链接，我更新了代码http://jsfiddle.net/u6WYQ/6/ 需要使用defaults.numPrefix而不仅仅是numPrefix。也可以通过使用init方法隐藏dd默认值。还可以将选项与默认值合并以应用用户设置。

Answer 3

查看我的更新代码http://jsfiddle.net/u6WYQ/11/

在$.fn.faqToggle.defaults

$.extend

用于递增问题编号，请参阅内部.each（带idx的那个），而不是外部.each（由i引用）
在faqToggle正文中调用自定义jquery方法(function($){ ... }(jQuery))，而不是在

完整的代码

                (function($){
    $.fn.faqToggle = function(options){
        // declare the default options before processing them
        $.fn.faqToggle.defaults = {
          numPrefix: 'Q',
          numSubfix: '.',
          showTooltip:'Show answer',
          hideTooltip:'Hide Answer'
        }

        var opts = $.extend({},$.fn.faqToggle.defaults, options);


        function onClick(){
             if ( $(this).next('dd').is(":hidden") ) { // if the answer is hidden show it
                $(this).next('dd').show();
                $(this).attr("title","Hide answer"); // update screentip
            } else {
                $(this).attr("title","Show answer"); // update screentip
                $(this).next('dd').hide(); // if the answer is shown hide it
            }
        }


        return this.each(function(i){

            var questions = $(this).find('dt');
            var answers = $(this).find('dd');
            answers.hide(); // hide answers initially

            // for incrementing question number, referto inner .each, not the outer
            questions.each(function(idx){
                $(this).attr("title","Show answer"); // add screen tip
                $(this).wrapInner("<span class='faqToggleQues' />");
                $(this).prepend("<span class='faqToggleNumber'>"+opts.numPrefix + (idx+1) + opts.numSubfix+"</span>");

                $(this).click(onClick);

            });



        });


    };

// apply the custom jquery method in the (function($){ ... }(jQuery))
  $('#faqList').faqToggle();
})(jQuery);

jQuery查找/每个脚本无法正常工作

3 个答案: