代码之家 › 专栏 › 技术社区 › Zagloo

CKEditor-对于每个具有类名的属性,执行以下操作

jwplayer ckeditor jquery javascript

2

Zagloo · 技术社区 · 11 年前

我试图获取每个具有类名的元素的属性值。

这是我的代码:

var textareaId;

$(document).ready(function () {
    textareaId = $('#tiny_mce_block').find('textarea').attr('id'); // 
    ckeditor_init();
});

function ckeditor_init() {
    CKEDITOR.replace(textareaId, {
        allowedContent: true,
          on: {
            instanceReady: function (evt) {
                var editor = this;
                var data = editor.getData();
                var body = $(editor.document.getBody());

                jwplayer("video_block_sous_titres").onTime(function (event) {
                    $.each(**SELECT CLASS .ST**, function () { // HOW SELECT ELEMENTS WHERE THE CLASS IS 'st'
                        var d = SELECT DATA-TIME-START ; // HOW GET CONTENT OF ATTRIBUTE NAMED 'data-time-start'
                        var f = SELECT DATA-TIME-END; // HOW GET CONTENT OF ATTRIBUTE NAMED 'data-time-end'
                        if (d <= event.position && event.position <= f) {
                            if ($(this).attr("class") !== "active") {
                                $(".st").removeClass("active"); // HOW REMOVE THE CLASS 'active'
                                $(this).addClass("active"); // HOW ADD THE CLASS 'active'
                            }
                        } else {
                            $(this).removeClass("active"); // HOW REMOVE THE CLASS 'active'
                        }
                    });
                });
            }
        }
    });
}

在我的文本区域中,我有这个:

<span class="st" id="1" data-time-start="0.29" data-time-end="1.259" data-time-moy="0.1938">mardi </span>
<span class="st" id="2" data-time-start="2.048" data-time-end="5.406" data-time-moy="0.10832258064516">qualitÃ© sÃ©curitÃ© efficacitÃ© </span>

第一个问题: 在调用JWPlayer的循环中,如何为每个具有Class的元素选择 .st ,名为的属性的值 data-time-start 和 data-time-end ?

第二个问题: 之后,如何添加或删除类 active 到此为止 .st (用哪种方法?)?

我试图获得属性的内容,但没有办法:

var st = el.find('#20');
console.log(st.getAttribute('data-time-start'));

我的小提琴: http://jsfiddle.net/B4yGJ/415/

谢谢你的帮助!

1 回复 | 直到 11 年前

1

0

Zagloo 11 年前

我解决了这个问题:

function jwplayer_underligne_st() {
        jwplayer("video_block_sous_titres").onTime(function (evt) {
            //var st = $(CKEDITOR.instances[textareaId].window.getFrame().$).contents().find('.word');
            var st = $(CKEDITOR.instances[textareaId].window.getFrame().$).contents().find('.st');
            $.each(st, function () {
                $this = $(this);
                var d = $this.attr("data-time-start");
                var f = $this.attr("data-time-end");
                if (d <= evt.position && evt.position <= f) {
                    if ($this.attr("class") !== "active") {
                        $this.addClass("active");
                    }
                } else {
                    $this.removeClass("active");
                }
            });
        });
    }