javascript - 这段代码是否会导致我的 mediaelement.js 播放器/播放列表出现 ajax 排序问题？
问题描述
我在修复我的 mediaelement.js 音乐播放器使用 ajax 对分类页面进行排序的方式时遇到问题，我需要帮助！我在编码方面还差得很远，但我知道足以运行一个电子商务网站。我遇到的问题是分类页面播放错误的歌曲，即使播放列表中歌曲的顺序是正确的。示例：主页（example.com）上的主音乐播放器按从最新到最旧的降序播放最新上传的歌曲（example-song1），这是正确的，但是当您转到诸如 example.com/ 之类的分类页面时流派/替代播放列表将以 example-song5 开头，但无论您使用自动播放还是手动按下播放，播放列表都会播放 example-song1，但如果您单击下一个曲目按钮，它将播放 example-song5。我知道它与 ajax 有关，因为如果您在分类页面上使用排序栏并搜索包含 example-song1 的分类（流派、类别、标签）组，即使 example-song5 也会突出显示 example-song1应该会玩。在主题作者实现 ajax 排序之前，这个错误也从未发生过。此代码中的任何内容都可能导致问题并且可以修复吗？
/*******************************************
Player Ajax Sorting Code
********************************************/
// Genre
var kl = jQuery.noConflict();
kl(function(){
var lmn;
kl("#generId li").click(function(e){
e.preventDefault();
var genrTxt = kl.trim(kl(this).find('a').text().toLowerCase());
// Shows clear button
kl("#filterLielm").removeClass("hide");
var wWid = kl(window).width();
kl(".mejs-playlist li").removeClass("hide");
kl(".mejs-playlist li").removeAttr("style");
kl(".mejs-playlist li").each(function(){
var liAttr = kl(this).attr('data-genr').toLowerCase();
var dk = liAttr.replace(", "," ");
if(dk.indexOf(genrTxt) == -1){
kl(this).addClass("hide");
}
});
/* ---- Mobile Action Code --- */
if(wWid <= 1024){
kl("#beat_sort_bar a.firstULLIelement").click(function(){
if(kl('#beat_sort_bar ul.secondULelement.hide').length){
kl('#beat_sort_bar ul.secondULelement').removeClass('hide');
}
});
if(!kl('#beat_sort_bar ul.secondULelement.hide').length){
kl('#beat_sort_bar ul.secondULelement').addClass('hide');
}
}
});
var taggenre = kl("audio").attr("tag-genre");
if(taggenre){
var taggenreTxt = taggenre.trim(kl(this).find('a').text().toLowerCase());
kl(".mejs-playlist li").removeClass("hide");
kl(".mejs-playlist li").removeAttr("style");
kl(".mejs-playlist li").each(function(){
var liAttr = kl(this).attr('data-genr').toLowerCase();
var dk = liAttr.replace(", "," ");
if(dk.indexOf(taggenreTxt) == -1){
kl(this).addClass("hide");
}
});
}
// Category
var kh = jQuery.noConflict();
kh("#catId li").click(function(e){
e.preventDefault();
var genrTxt = kh.trim(kl(this).find('a').text().toLowerCase());
kh("#filterLielm").removeClass("hide");
var wWid = kl(window).width();
kh(".mejs-playlist li").removeClass("hide");
kh(".mejs-playlist li").removeAttr("style");
kh(".mejs-playlist li").each(function(){
var liAttr = kh(this).attr('data-cat').toLowerCase();
if(liAttr.indexOf(genrTxt) == -1){
kh(this).addClass("hide");
}
});
/* ---- Mobile Action Code --- */
if(wWid <= 1024){
kl("#beat_sort_bar a.firstULLIelement").click(function(){
if(kl('#beat_sort_bar ul.secondULelement.hide').length){
kl('#beat_sort_bar ul.secondULelement').removeClass('hide');
}
});
if(!kl('#beat_sort_bar ul.secondULelement.hide').length){
kl('#beat_sort_bar ul.secondULelement').addClass('hide');
}
}
});
var termcat = kh("audio").attr("tag-cat");
if(termcat){
var termcatTxt = termcat.trim(kl(this).find('a').text().toLowerCase());
kh(".mejs-playlist li").removeClass("hide");
kh(".mejs-playlist li").removeAttr("style");
kh(".mejs-playlist li").each(function(){
var liAttr = kl(this).attr('data-cat').toLowerCase();
var dk = liAttr.replace(", "," ");
if(dk.indexOf(termcatTxt) == -1){
kl(this).addClass("hide");
}
});
}
// Tags
var kd = jQuery.noConflict();
kd("#tagId li").click(function(e){
e.preventDefault();
var genrTxt = kd.trim(kl(this).find('a').text().toLowerCase());
kd("#filterLielm").removeClass("hide");
var wWid = kl(window).width();
kd(".mejs-playlist li").removeClass("hide");
kd(".mejs-playlist li").removeAttr("style");
kd(".mejs-playlist li").each(function(){
var liAttr = kd(this).attr('data-tag').toLowerCase();
if(liAttr.indexOf(genrTxt) == -1){
kd(this).addClass("hide");
}
});
/* ---- Mobile Action Code --- */
if(wWid <= 1024){
kl("#beat_sort_bar a.firstULLIelement").click(function(){
if(kl('#beat_sort_bar ul.secondULelement.hide').length){
kl('#beat_sort_bar ul.secondULelement').removeClass('hide');
}
});
if(!kl('#beat_sort_bar ul.secondULelement.hide').length){
kl('#beat_sort_bar ul.secondULelement').addClass('hide');
}
}
});
var termtag = kd("audio").attr("tag-tag");
if(termtag){
var termtagTxt = termtag.trim(kd(this).find('a').text().toLowerCase());
kd(".mejs-playlist li").removeClass("hide");
kd(".mejs-playlist li").removeAttr("style");
kd(".mejs-playlist li").each(function(){
var liAttr = kd(this).attr('data-tag').toLowerCase();
var dk = liAttr.replace(", "," ");
if(dk.indexOf(termtagTxt) == -1){
kd(this).addClass("hide");
}
});
}
// Price
var kdd = jQuery.noConflict();
kdd("#priceId li").click(function(e){
e.preventDefault();
var genrTxt = kdd.trim(kl(this).find('a').text().toLowerCase());
kdd("#filterLielm").removeClass("hide");
var wWid = kl(window).width();
kdd(".mejs-playlist li").removeClass("hide");
kdd(".mejs-playlist li").removeAttr("style");
kdd(".mejs-playlist li").each(function(){
var liAttr = kdd(this).attr('dataprice');
if(liAttr != ''){
liAttr = kdd(this).attr('dataprice').toLowerCase();
if(liAttr.indexOf(genrTxt) == -1){
kdd(this).addClass("hide");
}
}
});
/* ---- Mobile Action Code --- */
if(wWid <= 1024){
kl("#beat_sort_bar a.firstULLIelement").click(function(){
if(kl('#beat_sort_bar ul.secondULelement.hide').length){
kl('#beat_sort_bar ul.secondULelement').removeClass('hide');
}
});
if(!kl('#beat_sort_bar ul.secondULelement.hide').length){
kl('#beat_sort_bar ul.secondULelement').addClass('hide');
}
}
});
var termprice = kdd("audio").attr("tag-price");
if(termprice){
var termpriceTxt = termprice.trim(kdd(this).find('a').text().toLowerCase());
kdd(".mejs-playlist li").removeClass("hide");
kdd(".mejs-playlist li").removeAttr("style");
kdd(".mejs-playlist li").each(function(){
var liAttr = kdd(this).attr('dataprice').toLowerCase();
var dk = liAttr.replace(", "," ");
if(dk.indexOf(termpriceTxt) == -1){
kdd(this).addClass("hide");
}
});
}
// Search
var sh = jQuery.noConflict();
sh('#playersearch').submit( function(e){
e.preventDefault();
var shtxt = sh(this).find(".beat-sort-search-input").val().toLowerCase();
// Clear button
sh("#filterLielm").removeClass("hide");
sh(".mejs-playlist li").removeClass("hide");
sh(".mejs-playlist li").removeAttr("style");
sh(".mejs-playlist li").each(function(){
var chkpost = sh(this).text()+sh(this).attr('data-tag')+sh(this).attr('data-
cat')+sh(this).attr('dataprice')+sh(this).attr('data-genr');
chkpost = chkpost.toLowerCase();
chkpost= chkpost.replace(", "," ");
//alert(chkpost);
if(chkpost.indexOf(shtxt) == -1){
sh(this).addClass("hide");
}
});
});
// Category page, taxonomy page, tag page sorting code
var generList = sh("#jio").attr('datagen');
var tagList = sh("#jio").attr('datatag');
var catList = sh("#jio").attr('datacat');
var priceList = sh("#jio").attr('dataprice');
if(generList){ sh(".mejs-playlist li").each(function(){
var genlist = generList.toLowerCase();
var liAttr = sh(this).attr('data-genr').toLowerCase();
var dk = liAttr.replace(", "," ");
if(dk.indexOf(genlist) == -1){
sh(this).addClass("hide");
}
});}
//if(tagList != ''){
if(tagList){
sh(".mejs-playlist li").each(function(){
var taList = tagList.toLowerCase();
var liAttr = sh(this).attr('data-tag').toLowerCase();
if(taList){
if(liAttr.indexOf(taList) == -1){
sh(this).addClass("hide");
}
}
});
}
if(catList){
sh(".mejs-playlist li").each(function(){
var catuList = catList.toLowerCase();
var liAttr = sh(this).attr('data-cat').toLowerCase();
if(liAttr.indexOf(catuList) == -1){
sh(this).addClass("hide");
}
});
}
if(priceList){
sh(".mejs-playlist li").each(function(){
var pricuList = priceList.toLowerCase();
var liAttr = sh(this).attr('dataprice').toLowerCase();
//alert(liAttr+pricuList);
if(liAttr.indexOf(pricuList) == -1){
sh(this).addClass("hide");
}
});
}
更新
/********
* Genre Dropdown
*********/
if ( get_theme_mod('beat_sorting_bar_genre',true ) ) { ?>
<li class="dir"><a href="javaScript:void(0);" ><i class="fa fa-music"></i>
<?php _e( 'Genre', 'musicmaker' ); ?></a>
<ul id="generId"><?php $variable = wp_list_categories( array( 'taxonomy'
=> 'genre', 'use_desc_for_title' => 0, 'orderby' => 'name', 'echo' => 0,
'show_count' => 1, 'title_li' => '' ) );
$variable = str_replace(' (', '<span class="count">', $variable);
$variable = str_replace(')', '</span>', $variable); echo $variable; ?>
</ul></li>
<?php }
/********
* Category Dropdown
*********/
if ( get_theme_mod('beat_sorting_bar_categories',false ) ) { ?>
<li class="dir"><a href="javaScript:void(0);" ><i class="fa fa-list-ul">
</i> <?php _e( 'Category', 'musicmaker' ); ?></a>
<ul id="catId"><?php $variable = wp_list_categories( array( 'taxonomy' =>
'download_category', 'use_desc_for_title' => 0,'orderby' => 'name',
'show_count' => 1, 'echo' => 0, 'title_li' => '' ) );
$variable = str_replace(' (', '<span class="count">', $variable);
$variable = str_replace(')', '</span>', $variable); echo $variable; ?>
</ul></li>
<?php }
/********
* Tag Dropdown
*********/
if ( get_theme_mod('beat_sorting_bar_tags',true ) ) { ?>
<li class="dir"><a href="javaScript:void(0);" ><i class="fa fa-tag"></i>
<?php _e( 'Tag', 'musicmaker' ); ?></a>
<ul id="tagId"><?php $variable = wp_list_categories( array( 'taxonomy' =>
'download_tag', 'use_desc_for_title' => 0, 'orderby' => 'name',
'show_count' => 1, 'echo' => 0, 'title_li' => '' ) );
$variable = str_replace(' (', '<span class="count">', $variable);
$variable = str_replace(')', '</span>', $variable); echo $variable; ?>
</ul></li>
<?php }
/********
* Price Dropdown
*********/
if ( get_theme_mod('beat_sorting_bar_price',false ) ) { ?>
<li class="dir"><a href="javaScript:void(0);" ><i class="fa fa-usd"></i>
<?php _e( 'Price', 'musicmaker' ); ?></a>
<ul id="priceId"><?php $variable = wp_list_categories( array( 'taxonomy'
=> 'price_taxonomy', 'use_desc_for_title' => 0, 'order' => 'asc',
'orderby' => 'slug', 'show_count' => 1, 'echo' => 0, 'title_li' => '' ) );
$variable = str_replace(' (', '<span class="count">', $variable);
$variable = str_replace(')', '</span>', $variable); echo $variable; ?>
<?php /* Removed echo customsqlfunction(); */ ?></ul></li><?php } ?>
</ul>
<?php
最后更新
* If Genre */ if ( is_tax('genre')) { $termgenre = get_term_by ( 'slug', get_query_var( 'term' ), get_query_var( 'taxonomy' ) ); }
/* If Tags */ if (is_tax('download_tag')) { $termtag = get_term_by( 'slug', get_query_var( 'term' ), get_query_var( 'taxonomy' ) ); }
/* If Categories */ if (is_tax('download_category')) { $termcat = get_term_by( 'slug', get_query_var( 'term' ), get_query_var( 'taxonomy' ) ); }
/* If Price */ if (is_tax('price_taxonomy')) { $termprice = get_term_by( 'slug', get_query_var( 'term' ), get_query_var( 'taxonomy' ) ); }
/* If Search */ if ( is_search() ) { if ( have_posts() ) { $search_query = get_search_query(); } else { } }
//$random = '';
/* Autostart Check */ $autostart = get_theme_mod('beat_store_auto_start', 'false');
/* Loading Gif */ echo '<div id="beatstore_loader"><img alt="Loading..." src="' . get_template_directory_uri(). '/images/loader.gif" /></div>';
/* Content Fade */ echo '<div id="beatstore_loader_window">';
/* Load Beat Sort Bar */ get_template_part( 'template-parts/beat-sort-menu' );
/* Beat Store Playlist */ echo '<div id="mediawrapper">';
echo '<audio id="mejs" style="width:100%;" preload="none" '; if ($autostart == "true") { echo 'autoplay="autoplay" '; }
if ( is_tax('genre') ) { if($termgenre) { echo 'tag-genre="' .strtolower($termgenre->name).'"'; } }
if ( is_tax('download_tag' ) ) { if($termtag) { echo 'tag-tag="' .strtolower($termtag->name).'"'; } }
if ( is_tax('download_category' ) ) { if($termcat) { echo 'tag-cat="' .strtolower($termcat->name).'"'; } }
if ( is_tax('price_taxonomy' ) ) { if($termprice) { echo 'tag-price="' .strtolower($termprice->name).'"'; } }
if ( is_search() ) { if($search_query) { echo 'tag-search="'.strtolower($search_query).'"'; } }
if ( get_theme_mod('beat_store_order') == "random") { $random = 'rand'; }
?> controls>
<?php $n = ''; if (is_customize_preview()){$n='5';}
else{if(valchker()){$n=valchker();}} $args = array('post_type'=>'download','posts_per_page' => $n, 'order' => 'DESC' ,'orderby' => $random );
$query = new WP_Query($args); while($query -> have_posts()) : $query -> the_post();
get_template_part( 'template-parts/beat-store-loop-playlist' ); endwhile; wp_reset_query();
echo '</audio><div class="clear"></div></div><div class="clear"></div></div>';?>
解决方案
推荐阅读
- c# - 如何更新 Web API 中的集合？
- sql - 使用 SQL 查询更新大表中的一条记录
- python-3.x - 如何避免 ConnectionResetError？
- python - 从 conda 环境中删除未使用的包
- python - 在 docker-py 中暴露网络上的端口
- java - java - 如何在java中的非数组网格中填充正方形？
- javascript - 从动态创建的子组件更改状态 - React
- react-native - 安装 Camera 和 react-native-qrcode-scanner 时出错（构建失败并出现异常）
- angular - 下拉选择选项上的样式字体
- angular - Angular 8 和链式 observables