CKEditor - 为名称为 class 的每个属性做一些事情
CKEditor - For each attribute with class name do something
我正在尝试获取具有 class 名称的每个元素的属性值。
这是我的代码:
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
的元素 select,名为 data-time-start
和 data-time-end
的属性值?
第二个问题:
之后,How to add or remove class active
to this .st
(with which method?) ?
我试过这样获取属性的内容,但没有办法:
var st = el.find('#20');
console.log(st.getAttribute('data-time-start'));
我的 FIDDLE : http://jsfiddle.net/B4yGJ/415/
感谢您的帮助!
我用这个解决了我的问题:
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");
}
});
});
}
我正在尝试获取具有 class 名称的每个元素的属性值。
这是我的代码:
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
的元素 select,名为 data-time-start
和 data-time-end
的属性值?
第二个问题:
之后,How to add or remove class active
to this .st
(with which method?) ?
我试过这样获取属性的内容,但没有办法:
var st = el.find('#20');
console.log(st.getAttribute('data-time-start'));
我的 FIDDLE : http://jsfiddle.net/B4yGJ/415/
感谢您的帮助!
我用这个解决了我的问题:
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");
}
});
});
}